React で関数とイベント ハンドラーをバインドする必要があるのはなぜですか?

React で関数とイベント ハンドラーをバインドする理由とタイミング?

React では、クラス メソッドのコンテキストはデフォルトではバインドされません。これらのメソッド内でコンポーネントの状態または props にアクセスする場合、それらのコンテキストをバインドする必要があります。

関数バインド オプション

関数をバインドするにはいくつかの方法があります。

1.コンストラクター バインディング:

class SomeClass extends Component {
  constructor() {
    super();
    this.someEventHandler = this.someEventHandler.bind(this);
  }

  someEventHandler(event) {}
}

2.太い矢印関数:

class SomeClass extends Component {
  someEventHandler = (event) => {
  };
}

3.インライン Lambda 関数バインディング:

onChange={(event) => this.someEventHandler(event)}

4. .bind() メソッド バインディング:

onChange={this.someEventHandler.bind(this)}

イベント ハンドラー バインディング オプション

1.インライン Lambda 関数バインディング:

onChange={(event) => this.someEventHandler(event)}

2. .bind() メソッド バインディング:

onChange={this.someEventHandler.bind(this)}

バインディング メソッドの選択

適切なバインド メソッドは、コンポーネントの構造と必要な機能によって異なります:

事前バインディング (コンストラクター バインディングまたはファット アロー関数):

• 関数がコンポーネントの状態またはプロパティにアクセスする必要がある場合に使用します。

実行時バインディング (インライン Lambda 関数バインディングまたは .bind() メソッド):

• 関数がコンポーネントの状態または props にアクセスしていない場合に使用します。
• 追加のパラメーターを許可します。

追加パラメータの受け渡し:

• 事前バインディングの場合、コンストラクターの関数引数としてパラメータを渡すか、fat を使用します。追加のパラメーターを持つアロー関数。
• ランタイム バインディングの場合は、インライン ラムダ関数または追加のパラメーターを持つ .bind() を使用します。

使用例

提供されたコード内スニペット:

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

これは、.bind() メソッドを使用した実行時バインディングであり、someEventHandler のコンテキストをコンポーネント インスタンスにバインドします。

render() {
  return ;
}

これは、.bind() メソッドを使用した実行時バインディングです。インライン ラムダ関数。これは、someEventHandler のコンテキストをコンポーネント インスタンスにバインドします。

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

これは、追加パラメーターのない実行時バインディングです。ただし、正しいコンテキストが維持されるように、コンストラクターで someEventHandler 関数を事前にバインドするか、ファット アロー関数を使用することをお勧めします。

以上がReact で関数とイベント ハンドラーをバインドする必要があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。