反应 on单击将类添加到单击的元素，但从其他元素中删除

Question

因此，我在这里尝试实现的目标与此处所做的非常相似 在弹性框中过渡项目的灵活性增长

但是我想知道如何用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个元素，这并不重要

Answer 1

您可以在单击时设置活动索引：// Statethis.state = {&nbsp; activeIndex: null};// eventonElementClicked(e) {&nbsp; this.setState({ activeIndex: e.target.index })}// class to useclassName={this.index === this.state.activeIndex ? 'big-size' : ''}

Answer 2

const { useState, useEffect } = React;const App = () => {&nbsp; const [divs,] = useState(['blue', 'green', 'black']);&nbsp; const [selected, setSelected] = useState(null);&nbsp;&nbsp;&nbsp; const onClick = (id) => {&nbsp; &nbsp; setSelected(id);&nbsp; }&nbsp;&nbsp;&nbsp; return <div className="container">&nbsp; &nbsp; {divs.map(pr => <div key={pr} style={{background: pr}} className={`box ${pr === selected ? 'selected' : ''}`} onClick={() => onClick(pr)}></div>)}&nbsp; </div>}ReactDOM.render(&nbsp; &nbsp; <App />,&nbsp; &nbsp; document.getElementById('root')&nbsp; );.container {&nbsp; display: flex;&nbsp; height: 200px;}.box {&nbsp; flex: 1;&nbsp; cursor: pointer;&nbsp; transition: all .3s ease-in;}.selected {&nbsp; flex: 2;}<script src="https://unpkg.com/react/umd/react.development.js"></script><script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script><script src="https://unpkg.com/material-ui-lab-umd@4.0.0-alpha.32/material-ui-lab.development.js"></script><div id="root"></div>