如何從Ecmascript 6（ES6）上的類對象中的事件回調函數訪問對象成員

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

您會注意到，在React中使用ES6類時， 已經發生了很多變化 。

同樣，ES6類不會像 ES5 React.createClass那樣自動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

Answer 2

我認為問題是， this對render勢必對股利。

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