爲什麼我們需要綁定「這」的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

你是對的，但你錯過了一件事。沒有綁定到處理程序的組件this的範圍。那麼當你想要事件的上下文時會發生什麼？你沒有它。

解決此問題的另一種方法是從詞彙上綁定組件，以便您不必擔心手動綁定每個函數。

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

現在變得

state = {isToggleOn: true};