リアクションの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>