ハンドラが呼び出されたとき、Reactコンポーネント 'this'は定義されていません。

Question

JSXで単純なハンドラをアタッチしています。 JSXで.bind(this)を実行しない限り、changeメソッドに入ると、this.setState()を実行すると、thisはundefinedになります。私は何か間違っているのですか？

import React,{Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import CounterConstants from './../constants/constants'; 
import AppDispatcher from './../dispatcher/AppDispatcher'; 
import CounterActions from './../actions/actions'; 

class Controls extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     todoText: '' 
    }; 
    } 
    change(event){ 
    this.setState({todoText: event.target.value}); 
    } 
    submit(event){ 
    if(this.state.todoText !== ''){ 
     CounterActions.addTodo({text: this.state.todoText}); 
     this.setState({todoText: ''}); 
    } 
    } 
    render(){ 
    return (
     <div className="controls form-inline"> 
     <input type="text" name="todoText" className="form-control" onChange={this.change.bind(this)} value={this.state.todoText} /> 
     <button className="btn btn-primary" onClick={this.submit.bind(this)}>Add a todo</button> 
     </div> 
    ) 
    } 
} 

export default Controls; 

Answer 1

、機能はあなたのための自動バインドされません。関数にコンテキストを提供するには、thisの値をコンポーネントのコンテキストにバインドする必要があります。

React.createClassを使用する場合は、すべての機能がデフォルトで自動バインドされます。

ほとんどの人はコンストラクタを使用して、その関数をthisのコンテキストにバインドします。これは、JSXを乱雑にするよりも少しきれいです。

希望に役立ちます。

Answer 2

私が何か間違ったことをやっていますか？

いいえ、JavaScriptの仕組みです。関数は自動バインドされません。 thisの値は、どのように関数がと呼ばれ、と呼ばれるかによって異なります。したがって、関数をどこかに渡して、特定の値を持つためにはthisが必要な場合は、それを自分でバインドする必要があります（注：ここでは、をバインドしても問題ありません）。

（オブジェクトを使用して）簡単な例：関連

'use strict'; 
 

 
var obj = { 
 
    method() { 
 
    console.log(this); 
 
    }, 
 
}; 
 

 
var method = obj.method; 
 
var boundMethod = obj.method.bind(obj); 
 
method();  // undefined 
 
boundMethod(); // Object {} 
 
obj.method(); // Object {}

：

• How does the "this" keyword work?
• How to access the correct `this` context inside a callback?
• Unable to access React instance (this) inside event handler

ドキュメント：あなたはES6クラス（class Controls extends Component）を使用しているので

• MDN - this
• YDKJS - this or That?