反応バインディングイベント

Question

なぜonClickメソッドをバインドする必要がありますか？ この場合、「this」はAppクラス、レンダリングメソッド、またはDOM要素を指しますか？

this

Answer 1

この場合Appインスタンスです。 Function.prototype.bindが何について

は、ドキュメントはかなりよく、それについて説明します。

The bind() method creates a new function that, when called, has its this keyword set to the provided value, [...]

我々はハンドラ関数にthis（Appインスタンス）を結合しなかった場合は、そのときhandleChangeが発射され、内部thisその関数の<input>要素には、onChangeイベントハンドラが含まれています。

bindを使用すると、thisは、イベントハンドラ内のAppインスタンスに強制されます。

Answer 2

バインドウェイなしで関数を呼び出すと、そのコンテキスト（this）がJavaScriptが動作する環境のグローバル変数に設定されます。ブラウザーでは、これはウィンドウのグローバル変数です。

bindは、コアのJavaScriptです。バインディングイベントの仕組みです。それは、リアクトの概念ではありません。

イベントハンドラ内で関数をバインドする代わりに、コンストラクタ自体でバインドすることができます。

constructor(props) { 
     super(props); 
     this.handleChange= this.handleChange.bind(this); 
    } 

Answer 3

onClickをバインドする必要があります。そうしないと、グローバルオブジェクトを参照するためです。一方

あなたのonClickが

選択のように任意のHTMLタグ内に定義されている場合もreactjsの要素として考え、それがこのがいるのonClickイベントにバインドされ、自身が提供されます。

あなたは選択のこのローカルにあなたのイベントを結合しないのであれば、それはmendatoryある

typeError:function not defined

だから、バインディングエラーがスローされます。

handleChange =() => { 
    this.setState ({checked: !this.state.checked}); 
} 

は今、あなたはこれを呼び出すことができます：あなたはこのように機能「handleChange」を変更することができますES6まで

this.state.something.map(function(holidays,i) { 

return 
    <div> 
    <Select onClick="this.function"/> 
    </div> 
}, this) 

Answer 4

のようなマップにしてから何かを返却する場合

同じことが適用されます関数：onChange = {this.handleChange}。希望はあなたを助けるでしょう:)