なぜ我々はJSXコールバックは「この」にバインドする必要があります

Question

ここで、我々はグローバルスコープにhandleClickの「この」オブジェクトを（）バインドする必要があります。

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); 
    } 

    handleClick() { 
    this.setState(prevState => ({ 
     isToggleOn: !prevState.isToggleOn 
    })); 
    } 

    render() { 
    return (
     <button onClick={this.handleClick}> 
     {this.state.isToggleOn ? 'ON' : 'OFF'} 
     </button> 
    ); 
    } 
} 

しかし、handleClick（）コンポーネントのスコープ内で定義されているので、すでにコンポーネント自体を参照しているので、この関数に 'this'オブジェクトを指定する必要はありませんか？

Answer 1

あなたは正しいですが、欠けているものは1つです。ハンドラにバインドされていないthisのスコープはコンポーネントです。だからイベントの文脈が必要なときはどうなりますか？あなたはそれを持っていません。

これを解決するもう1つの方法は、コンポーネントを字句的にバインドすることです。そのため、それぞれの関数を手動でバインドすることを心配する必要はありません。

handleClick =() => { //arrow function applied 
    this.setState(prevState => ({ 
     isToggleOn: !prevState.isToggleOn 
    })); 
} 

ここでもうコンポーネントコンストラクタは必要ありません。

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); 
} 

は今のでthis`は、イベントハンドラである何 `の

state = {isToggleOn: true};