Javascript 在reactjs中更改CSS onClick

当我点击一个特定的div时，我正在更新css类的css，如下所示

JS部分

html部分

---

现在这段代码可以正常工作了。但是如果用户再次单击trait_select，我想将css更改为transform:'rotateY0deg'。我该怎么做

我们只是稍微改变一下，比如：

trait_select = (e) => {
  const newTransform = this.state.transform == 'rotateY(180deg)' ? 'rotateY(0deg)' : 'rotateY(180deg)';
  this.setState({
    transform: newTransform
  })
}

当选择轨迹时，它将切换该值

但是我想存储启用/禁用的转换。因此，这将是：

建造师

性状选择

html部分

---

还有一件事。我有几个div使用相同的css类。当我使用你的解决方案时，每个div都开始旋转。是否只将css应用于已单击的div？您可以将此类div提取到组件以存储其旋转状态

<div className="trait_box polaroid" onClick={this.trait_select}>
    <div className="main_trait_card" style={{transform: this.state.transform}}>
    </div>
</div>

trait_select = (e) => {
  const newTransform = this.state.transform == 'rotateY(180deg)' ? 'rotateY(0deg)' : 'rotateY(180deg)';
  this.setState({
    transform: newTransform
  })
}

this.state = { rotated: false };

this.setState({ rotated: !this.state.rotated });

<div className="trait_box polaroid" onClick={this.trait_select}>
    <div className="main_trait_card" style={{transform: this.state.rotated ? 'rotateY(180deg)' : 'none' }}/>
</div>