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

来自docs：

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

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

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

或者您可以启用和利用Babel React ES6+ arrow functions feature：

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