☰

イベントハンドラ内のReactインスタンス（this）にアクセスできません[重複]質問する

tag-icon • tag-icon javascript reactjs ecmascript-6 babeljs
イベントハンドラ内の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

ベストアンサー1

this.changeContentthis.changeContent.bind(this)は、プロパティとして渡される前にを介してコンポーネント インスタンスにバインドされる必要がありますonChange。そうしないと、this関数本体の変数はコンポーネント インスタンスではなく を参照することになりますwindow。Function ::bind を参照してください。

ES6 クラスの代わりにを使用するとReact.createClass、コンポーネントで定義されたすべての非ライフサイクル メソッドがコンポーネント インスタンスに自動的にバインドされます。自動バインドを参照してください。

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

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

対

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

Ref はコンポーネント インスタンスに設定されており、 には設定されていないため、 を変更React.refsする必要があります。また、が参照できるように、 メソッドをコンポーネント インスタンスにバインドする必要があります。React.refs.somerefthis.refs.somerefsendContentthis

おすすめ記事