Reactの匿名関数で、自分のonClick属性の関数をラップする必要があるのはなぜですか？

Question

紛らわしいタイトルに申し訳ありません。私は、次の

<Component onClick={this.doSomething()} /> 

としての私の構成要素の一つにonClick属性を持っている場合、私は多くの場合、doSomethingの（）関数が実際に呼んでいるものに応じて変なエラーが発生します。 doSomething（）が状態を特に変更している場合は、あらゆる種類のレンダリングエラーが発生します。一方、私がこれを行うと、

var _this = this; 
<Component onClick{ 
    function(){ 
     _this.doSomething() 
    } 
} /> 

すべてのエラーが消えて、すべてが私の意図どおりに動作します。私のonClickアトリビュートを無名関数にラップして正確に何をしていますか？私がやろうとしていることをやるより良い方法がありますか？あなたがこれを行う場合は

Answer 1

：

<Component onClick={this.doSomething()} /> 

は、その後、あなたは は関数を呼び出すと onClick属性に戻り値を代入しています。 this.doSomething()がレンダリング中にコンポーネントの状態を変更すると、問題が発生します。

あなたが使用することができなければならない：関数はなく関数の実行結果より、属性に割り当てるよう

<Component onClick={this.doSomething} /> 

すなわち、()を除去します。

this.doSomething = this.doSomething.bind(this); 

あなたもonClick={this.doSomething.bind(this)}を使用することができますが、これは新しい機能は、コンポーネントが再レンダリングされるたびに作成されることを意味します。あなたのコンポーネントクラスのコンストラクタで

は、次の行を含める必要があります。 thisは、 thisが自動的 React.createClassを使用

に結合されていない、

• classキーワード（ES6）を使用して：

  コンポーネントクラス内thisの結合挙動は、コンポーネントが作成される方法に応じて、変化しますバインド

ES7では、さらに2つのオプションがあります。

• 代わりにonClick={::this.doSomething}を使用してfunctionキーワード
• のdoSomething =() => { //...を使用して、簡単な方法は、その耐用コメントをZequezにthis

感謝をバインドします。