爲什麼事件處理程序沒有得到正確的處理？

我瞭解綁定事件處理程序的概念，以便他們獲得對this的適當引用。我的問題是，爲什麼引用一個類的方法不提供適當的this？爲什麼事件處理程序沒有得到正確的處理？

ES6類不會自動爲類方法提供this嗎？

class MyComponent extends Component { 
    clickHandler(event) { 
    console.log('this', this); 
    } 

    render() { 
    return <button onClick={this.clickHandler}>Button</button>; 
    } 
}

正如預期的那樣，上面的代碼將打印null用於this值。但是，明確地調用處理程序將會給出正確的值，即<button onClick={event => this.clickHandler(event)} />。爲什麼處理程序使用箭頭函數對this有正確的參考？

我可以假設一堆答案，但我想要一個正確的答案。

來源

2017-02-27 Alan Thomas

爲什麼事件處理程序沒有得到正確的句柄？

他們這樣做！正常情況下，他們會獲取對您關注事件的元素的引用。

ES6類不會自動爲類方法提供this嗎？

他們沒有，沒有; ES2015（「ES6」）類使用與ES5相同的基本原型繼承和this賦值，並且具有不同的語法（以及一些新特性）。

然而，顯式調用處理程序會給出正確的價值

權，出於同樣的原因，在該代碼，example被稱爲與this指x：

x.example();

...但在此代碼中，調用example時this爲undefined（在嚴格模式下;它將是鬆散模式下的全局對象）：

let e = x.example; 
e();

使用class不會改變this管理的需要。

爲了this指組件類，你需要或者綁定this它，或使用關閉在this使用箭頭功能：

綁定（一個相當普遍的模式）：

class MyComponent extends Component { 
    constructor(...args) {        // *** 
    super(...args);         // *** 
    this.clickHandler = this.clickHandler.bind(this); // *** 
    }             // *** 

    clickHandler(event) { 
    console.log('this', this); 
    } 

    render() { 
    return <button onClick={this.clickHandler}>Button</button>; 
    } 
}

使用箭頭函數，而不是（也相當普遍的）：

class MyComponent extends Component { 

    clickHandler = event => {       // *** 
    console.log('this', this); 
    };             // *** 

    render() { 
    return <button onClick={this.clickHandler}>Button</button>; 
    } 
}

即後者OPTIO n假設你正在支持即將發佈的public class fields，這些都不是標準。（在撰寫本文時，建議爲still，編號爲stage 2。）不是在原型上創建屬性，而是使用箭頭函數創建一個實例字段，該實例字段關閉this（這是對組件實例的引用）。

來源

2017-02-27 18:18:28

爲什麼事件處理程序沒有得到正確的處理？

回答

相關問題