[解決済み】イベントハンドラ内のReactインスタンス（this）にアクセスできない【重複あり

質問

ES6 (BabelJS)で簡単なコンポーネントを書いているのですが、関数 this.setState が動作しない。

典型的なエラーは次のようなものです。

未定義のプロパティ 'setState' を読み取ることができません。

または

this.setStateは関数ではありません。

なぜかわかりますか？以下はそのコードです。

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

解決方法は？

this.changeContent を介してコンポーネントのインスタンスにバインドする必要があります。 this.changeContent.bind(this) として渡される前に onChange プロップ、さもなければ this は、コンポーネントのインスタンスではなく window . 参照 関数::バインド .

を使用する場合 React.createClass ES6 クラスの代わりに、コンポーネント上で定義されたすべての非ライフサイクルメソッドは、自動的にコンポーネントのインスタンスにバインドされます。参照 自動バインディング .

関数をバインドすると、新しい関数が作成されることに注意してください。render で直接バインドすると、コンポーネントがレンダリングするたびに新しい関数が作成されます。また、コンストラクタでバインドすると、一度だけ実行されます。

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

対

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

Refはコンポーネントのインスタンスに設定されます。 React.refs を変更する必要があります。 React.refs.someref から this.refs.someref . また sendContent メソッドをコンポーネントインスタンスに追加することで this を参照する。