「これ」を反応成分法に結合する方法

Question

なぜthis.click = this.click.bind(this)が必要なのか、何をしているのか分かりません。

class MyComponent extends React.Component { 
     constructor(props) { 
      super(props); 
      this.state = { 
       name: 'Initial State' 
      }; 
      this.click = this.click.bind(this); 
     } 
     click() { 
      this.setState({ 
       name: 'React Rocks!' 
      }); 
     } 
     render() { 
     return (
      <div> 
      <button onClick = {this.click}>Click Me</button> 
      <h1>{this.state.name}</h1> 
      </div> 
     ); 
     } 
    }; 

Answer 1

をあなたがthis.click()は、イベントリスナーから呼び出された使用bind()をしなかった場合は、thisの値ははあなたではないでしょう反応成分（stateおよびpropsなどがある）が代わりにthisであると、this.click()となる。通常、関数が呼び出されるたびに、実行コンテキスト（値）が関数自体に設定されます。

もちろん、あなたがReactコンポーネントのコンテキストにアクセスしたい場合、それはあまり良いことではありません。 bind()は、コンポーネントの同じ実行コンテキストで機能が確実に実行されるようにする手段の1つで、関数内でthis.state、this.propsなどにアクセスできます。もう一つの方法は、ES6矢印関数の宣言を使用することです：。

let foo =() => {console.log("bar")} 

自動的に関数がで宣言されたものは何でもコンテキストにfooためthisの値を設定し、あなたがコンポーネントを反応させるのと同じ文脈でfooを宣言すると、それはそのコンテキストを保持するので、thisの値がfooと同じになるようにします。

Answer 2

コールバック関数が異なるcontextと呼ばれているので、あなたはそれを行う必要があります。 .bind(this)を実行することにより、コンポーネントが常にコンポーネントと同じthiscontextで呼び出されるようにします。

Editted：per @ jeredのコメント。

Answer 3

click()関数を呼び出すと、この関数がなければ未定義になります。反応文書から...

JSXコールバックでは、この意味に注意する必要があります。 JavaScriptでは、クラスメソッドはデフォルトではバインドされていません。 this.handleClickをバインドしてonClickに渡すことを忘れた場合は、関数が実際に呼び出されたときには未定義の になります。

ここでいくつかの詳細は、ドキュメントをチェックアウト：https://facebook.github.io/react/docs/handling-events.html

Answer 4

クラスメソッドがデフォルトでバインドされていないため、React Documentationへのアコーディングが必要です。また、バインドせずにイベントハンドラにコールバックを渡すと、 'this'は定義されません。

あなたのコールバックをバインドするプロパティ初期化子を使用することができます。

class MyComponent extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      name: 'Initial State' 
 
     }; 
 
    } 
 
    handleClick() { 
 
     this.setState({ 
 
      name: 'React Rocks!' 
 
     }); 
 
    } 
 
    render() { 
 
     return (
 
      <div> 
 
      <button onClick = {() => this.handleClick()}>Click Me</button> 
 
      <h1>{this.state.name}</h1> 
 
      </div> 
 
    ); 
 
    } 
 
};

：あなたはまた、コールバックで 矢印機能を使用することができます

class MyComponent extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      name: 'Initial State' 
 
     }; 
 
    } 
 
    handleClick =() => { 
 
     this.setState({ 
 
      name: 'React Rocks!' 
 
     }); 
 
    } 
 
    render() { 
 
     return (
 
      <div> 
 
      <button onClick = {this.handleClick}>Click Me</button> 
 
      <h1>{this.state.name}</h1> 
 
      </div> 
 
    ); 
 
    } 
 
};