在 reactjs 中更改 CSS onClick

Question

当我单击某个div时，我正在更改(更新(css类的css，如下所示。

JS部分

constructor() {
        super();
        this.state = {
            transform: 'rotateY(0deg)',
        };
        this.trait_select = this.trait_select.bind(this);
    }

    trait_select = (e) => {
        this.setState({
            transform: 'rotateY(180deg)'

        })
    }

网页部分

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

现在这段代码工作正常。但是我想在用户再次单击trait_select时将 css 更改为 transform: 'rotateY(0deg)'。我该怎么做？

Answer 1

我们只是像这样改变一点：

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

选择trail时，它将切换值！

但我想存储启用/禁用的转换。所以它会是：

构造 函数

this.state = { rotated: false };

trait_select

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>