React コンポーネント関数で「this」が未定義なのはなぜですか?どうすれば修正できますか?

React コンポーネント関数での未定義の "This" の処理

この質問は、React コンポーネント関数内で "this" が未定義であるという問題に由来しています。 React コンポーネント。

提供された例では、onToggleLoop 関数で問題が発生します。この関数を実行すると、コンポーネント内で「this」が未定義になります。これは、React がメソッドをコンポーネントに自動的にバインドしないためです。

この問題を解決するには、bind(this) 関数を使用してコンストラクターでメソッドを手動でバインドする必要があります。その方法は次のとおりです。

constructor(props) {
  super(props);

  this.state = {
    loopActive: false,
    shuffleActive: false,
  };

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

コンストラクターで onToggleLoop メソッドをバインドすることで、実行時に「this」がコンポーネント インスタンスを参照するようにします。これにより、その関数内のコンポーネントの状態と props にアクセスできるようになります。

この変更を行うと、「this」オブジェクトは onToggleLoop 関数で未定義ではなくなり、loopActive を更新できるようになります。期待どおりの状態です。

以上がReact コンポーネント関数で「this」が未定義なのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。