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>

现在这段代码工作得很好。但是，如果用户再次点击transform: 'rotateY(0deg)'，我想将css更改为trait_select。我怎样才能做到这一点？

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>

在reactjs中更改CSS onClick

1 个答案: