如何从 Ecmascript 6 (ES6) 上的 class 对象中的事件回调函数访问对象成员

Question

我知道了：

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 真让我迷惑。

谢谢。

Answer 1

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

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

Answer 2

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

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

因此，您需要正确绑定函数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

如何从 Ecmascript 6 (ES6) 上的 class 对象中的事件回调函数访问对象成员

How to access an object member from event callback function in a class object on Ecmascript 6 (ES6)

javascript

ecmascript-harmony

ecmascript-6

1。使用箭头函数

2。使用绑定