首頁猿問反應...

反應 on單擊將類添加到單擊的元素，但從其他元素中刪除

JavaScript

慕尼黑5688855 2022-09-29 15:16:38

因此，我在這里嘗試實現的目標與此處所做的非常相似在彈性框中過渡項目的靈活性增長但是我想知道如何用React做到這一點，說我有這個代碼class MyComponent extends React.Component {constructor(props) { super(props); this.state = { classNameToUse: '' }; this.onElementClicked = this.onElementClicked.bind(this);}onElementClicked() { this.setState({ classNameToUse : 'big-size'})}render() { return ( <div> <div className={this.state.classNameToUse} onClick={this.onElementClicked} > something </div> <div className={this.state.classNameToUse onClick={this.onElementClicked} > something else </div> </div> ); }}這當然會給它們倆添加className，但我想實現的是，其中一個隨著動畫而變大，另一個隨著崩潰而變大。如果我有2個或10個元素，這并不重要

查看完整描述

2 回答

慕勒3428872

TA貢獻1848條經驗獲得超6個贊

您可以在單擊時設置活動索引：

// State

this.state = {

activeIndex: null

};

// event

onElementClicked(e) {

this.setState({ activeIndex: e.target.index })

}

// class to use

className={this.index === this.state.activeIndex ? 'big-size' : ''}

反對回復 2022-09-29

侃侃爾雅

TA貢獻1801條經驗獲得超16個贊

const { useState, useEffect } = React;

const App = () => {

const [divs,] = useState(['blue', 'green', 'black']);

const [selected, setSelected] = useState(null);

const onClick = (id) => {

setSelected(id);

}

return <div className="container">

{divs.map(pr => <div key={pr} style={{background: pr}} className={`box ${pr === selected ? 'selected' : ''}`} onClick={() => onClick(pr)}></div>)}

</div>

}

ReactDOM.render(

<App />,

document.getElementById('root')

);

.container {

display: flex;

height: 200px;

}

.box {

flex: 1;

cursor: pointer;

transition: all .3s ease-in;

}

.selected {

flex: 2;

}

反對回復 2022-09-29

2 回答
0 關注
95 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

反應 on單擊將類添加到單擊的元素，但從其他元素中刪除

反應 on單擊將類添加到單擊的元素，但從其他元素中刪除

2 回答

添加回答