コンテキスト エラーを回避するために React イベント ハンドラーで「this」を適切にバインドするにはどうすればよいですか?

React イベント ハンドラーのあいまいさを理解する

React では、イベント ハンドラーをコンポーネント インスタンスにバインドすることで、イベント ハンドラーが this コンテキストに確実にアクセスできるようになります。ただし、開発者がイベント ハンドラー関数内で this.setState または this.refs にアクセスしようとすると、エラーが発生する可能性があります。この問題は、コンポーネント インスタンスに暗黙的にバインドされる場合のあいまいさに起因します。

これに対処するには、イベント ハンドラー関数を props として渡す前にコンポーネント インスタンスにバインドします。これにより、関数本体内の this 変数がグローバル ウィンドウ オブジェクトではなくコンポーネント インスタンスを参照することが保証されます。

React の ES6 クラス構文を使用する場合、このバインディングはコンストラクター内で以下を介して実現できます。

constructor(props) {
  super(props);
  this.changeContent = this.changeContent.bind(this);
}

あるいは、React.createClass メソッドを使用すると、イベント ハンドラーがコンポーネント インスタンスに自動的にバインドされます。ただし、次の点に注意することが重要です。

• 関数をバインドすると新しい関数が作成されるため、コンストラクターでバインドする (1 回実行される) か、レンダーで直接バインドする (レンダリングごとに新しい関数を作成する) ことを検討してください。

コンストラクター バインディングの例:

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

レンダリングの例バインディング:

render() {
  return <input onChange={this.changeContent.bind(this)} />;
}

さらに、イベント ハンドラー内のコンポーネント参照にアクセスするときは、React.refs ではなく this.refs を参照します。

以上がコンテキスト エラーを回避するために React イベント ハンドラーで「this」を適切にバインドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。