React fixバインドの問題で無名関数にイベントハンドラを配置するにはどうすればよいですか？

Question

handling events in Reactについて学んで、以下の両方のシナリオでバインディングがどのように機能するのでしょうか？​​をthis.handleClickと参照することができますが、なぜそれでもバインドする必要がありますか？ハンドラを呼び出すコンポーネントであるため、ハンドラ内のthisはすでにコンポーネントを指していませんか？また、なぜアノニマス関数でハンドラを配置することもできますか？

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

ソリューションはこれです：

class Toggle extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {isToggleOn: true}; 

    // This binding is necessary to make `this` work in the callback 
    this.handleClick = this.handleClick.bind(this); 
    } 

しかし、なぜこれも動作しますか？あなたは機能上bind(this)を呼び出さない場合でも、あなたのために自動的に「バインド」this：矢印機能ので

class LoggingButton extends React.Component { 
    handleClick() { 
    console.log('this is:', this); 
    } 

    render() { 
    // This syntax ensures `this` is bound within handleClick 
    return (
     <button onClick={(e) => this.handleClick(e)}> 
     Click me 
     </button> 
    ); 
    } 
} 

Answer 1

（(e) => this.handleClick(e)それはあなたのケースではこれです）。だからここに：

<button onClick={(e) => this.handleClick(e)}> 
    Click me 
</button> 

匿名関数は、自動的に正しい囲んでいるコンテキスト（あなたのケースでLoginButtonコンポーネント）が与えられ、それが​​方法があります。そしてそれはそれが動作する方法です。

このようにしてthis.handleClick = this.handleClick.bind(this);を矢印のような機能（this.handleClick =() => this.handleClick;）にすることもできますが、同じ結果が得られます。詳細な説明のための

ルックhere：

矢印機能は、独自の、このコンテキストを作成していないので、これは外側の文脈から本来の意味を持っています。