反应 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

您可以在单击时设置活动索引：

// 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' : ''}

Answer 2

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;

}

<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>