为什么事件处理程序没有得到正确的处理？

我了解绑定事件处理程序的概念，以便他们获得对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

为什么事件处理程序没有得到正确的处理？

回答

相关问题