javascript - Reactjs，这是未定义的

Question

我实际上正在尝试使用商店和操作开发一个简单的应用程序，并使用fluxible 对组件做出反应，但我遇到了一个问题。

事实上，在我的组件方法 add() 中，“this”是未定义的......

我不知道是什么问题...

这是我的组件：

从“反应”导入反应；

class Client extends React.Component {

    constructor (props) {
      super(props);
    }

    add(e){
      this.context.dispatch('ADD_ITEM', {name:'Marvin'});
    }

    render() {
        return (
            <div>
                <h2>Client</h2>
                <p>List of all the clients</p>
                <button onClick={this.add}>Click Me</button>
                <ul>
                </ul>
            </div>
        );
    }


}

Client.contextTypes = {
    dispatch: React.PropTypes.func.isRequired
};

export default Client;

Answer 1

试试这个按钮：

<button onClick={this.add.bind(this)}>Click Me</button>

Answer 2

从文档：

方法遵循与常规 ES6 类相同的语义，这意味着它们不会自动将 this 绑定到实例。您必须明确使用 .bind(this) 或箭头函数 =>。

所以要么你绑定函数（我觉得这很乏味）：

<button onClick={this.add.bind(this)}>Click Me</button>

或者你可以启用和利用Babel React ES6+ 箭头函数特性：

add = (e) => {
    this.context.dispatch('ADD_ITEM', {name:'Marvin'});
}