如何从 Ecmascript 6（ES6）上的类对象中的事件回调函数访问对象成员答案

【问题标题】：How to access an object member from event callback function in a class object on Ecmascript 6 (ES6)如何从 Ecmascript 6（ES6）上的类对象中的事件回调函数访问对象成员
【发布时间】：2015-07-01 20:18:07
【问题描述】：

我有这个：

class Register {

    render(){
        return (<div onchange={this.aFunction}></div>)
    };

    aFunction(event){
        this.printSomething();  //Uncaught TypeError: undefined is not a function
    }

    printSomething(){
        console.log('Horray');
    }

}

如何从函数中调用 printSomething？ Es6 真的让我很困惑。

谢谢。

【问题讨论】：

试试：return (<div onchange={this.aFunction.bind(this)}></div>)。虽然我不熟悉这种花括号语法。
成功了，谢谢！

标签： javascript ecmascript-6 ecmascript-harmony

【解决方案1】：

你会注意到当使用 ES6 类和 React a lot has changed 时。

此外，ES6 类的 autobind 不像 ES5 React.createClass 那样。

因此需要正确绑定函数的this

你有两个选择

1。使用箭头函数

render(){
    return <div onchange={event => this.aFunction(event)}></div>;
}

2。使用绑定

render(){
    return <div onchange={this.aFunction.bind(this)}></div>;
}

我假设您为此使用 React.js。如果你是，你需要更新

class Register

到

class Register extends React.Component

【讨论】：

我是，谢谢你的回答，别担心我的课比这复杂得多，我只是简化了它，忘了在这里添加扩展。

【解决方案2】：

我认为问题在于 render 上的 this 绑定在 div 上。

var foo = new Register;
var div = foo.render();
div.onchange(); // this is div, not foo
foo.aFunction(); // doesn't throw TypeError.

【讨论】：