`this.setState` が未定義であるか、React イベント ハンドラーの関数ではないのはなぜですか?

イベント ハンドラー内で React インスタンス (this) にアクセスしています

問題:

を試行したときイベント ハンドラー内で this.setState を使用して React 状態を更新すると、次のようなエラーが発生する可能性があります。 「未定義のプロパティ 'setState' を読み取れません」 または 「this.setState は関数ではありません」 として。これは、このキーワードがイベント ハンドラー内のコンポーネント インスタンスを参照していないことを示します。

説明:

ES6 React コンポーネントでは、コンポーネントにバインドされた関数は内で定義する必要があります。コンストラクター、または this.methodName.bind(this) を使用して render メソッドで明示的にバインドします。これは、JavaScript アロー関数構文 (() => など) が新しい関数スコープを作成し、これをコンポーネントに自動的にバインドしないためです。

解決策:

方法 1 (バインドコンストラクター):

constructor(props) {
  super(props);
  this.state = { inputContent: 'startValue' };
  this.changeContent = this.changeContent.bind(this); // Binding here
}

メソッド 2 (レンダリング時のバインディング):

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

注: React を使用する場合。 createClass、すべてのメソッドが自動的にコンポーネントにバインドされますinstance.

追加修正:

React 要素参照にアクセスするには、コード内で React.refs.someref を this.refs.someref に置き換える必要があります。また、sendContent メソッドは、上記のバインド メソッドのいずれかを使用してコンポーネントにバインドする必要があります。

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