javascript - 在 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)'


        })

    }

html部分

<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 });

html部分

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