React onClick将类添加到clicked元素，但从其他元素中删除

Question

所以我在这里想要实现的功能与在此处实现的功能非常相似flexbox中项目的过渡弹性增长

但是我想知道如何用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' : ''}