トグルメニューに反応して、ボタンをクリックすると異なるスタイルにする

Question

How to build a sliding menu using React and Lessチュートリアルの後、反応アプリケーションでモバイルハンバーガーメニューを作成しようとしています。

正常に動作していますが、メニューが表示されているかどうかによって、ボタンのスタイルを切り替えたいと思います。そのため、私はメニュークラスの外ではなくメニュークラス内のメニューボタンにしようとしましたが、エラーが出ました。エラーは、私がレンダー機能内から状態を変更できないことを示しています。では、どうすればこの問題を解決できますか？

私は反応を使用しないために使用されています。その場合、body要素に "showing-menu"というクラスを作成しただけで、メニューが表示されているかどうかによって必要なスタイルを変更できます。このアプローチはReaciveではないようですが、どうすればReactでこれを解決できますか？

Answer 1

この状態でメニューを切り替えるだけで、そのクラスをクラスリストに追加することができます。私はすぐに状態がトグルとしてtrueに設定され、myToggledClassはdivのクラスのリストに追加され、上記の例では..だから、私が何を意味するかであるので、ここで

class MyClass extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      toggled: false 
     }; 

     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
     this.setState({ 
      toggled: true 
     }); 
    } 

    render() { 
     return (
      <div> 
      <div className={"specialClass " + this.state.toggled ? 'myToggledClass' : ''}> 
      <button onClick={this.handleClick}>Click me!</button> 
      </div> 
     ) 
    } 
} 

を既存のコードを参照することはできません。