Javascript React onClick向单击的元素添加类，但从其他元素中删除

因此，我在这里试图实现的与在这里所做的非常相似

但是我想知道的是，如果说我有这个代码，这怎么能用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>
       );
    }
}

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ classNameToUse:' }; this.onElementClicked=this.onElementClicked.bind（this）； } onElementClicked（）{ this.setState（{classNameToUse:'big size'}） } render（）{ 返回( 某物 别的 ); } }

---

这当然会为它们添加类名，但我想实现的是，其中一个随着动画而变大，另一个则会崩溃。如果我有2个或10个元素也没关系

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

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

---

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

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

const{useState，useffect}=React；
常量应用=（）=>{
const[divs，]=useState（['blue'，'green'，'black']）；
const[selected，setSelected]=useState（null）；
const onClick=（id）=>{
（id）；
}
返回
{divs.map（pr=>onClick（pr）}>）}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
.container{
显示器：flex；
高度：200px；
}
.盒子{
弹性：1；
光标：指针；
过渡：所有.3s都很轻松；
}
.选定{
弹性：2；
}


const{useState，useffect}=React；
常量应用=（）=>{
const[divs，]=useState（['blue'，'green'，'black']）；
const[selected，setSelected]=useState（null）；
const onClick=（id）=>{
（id）；
}
返回
{divs.map（pr=>onClick（pr）}>）}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
.container{
显示器：flex；
高度：200px；
}
.盒子{
弹性：1；
光标：指针；
过渡：所有.3s都很轻松；
}
.选定{
弹性：2；
}