Reactjs и это не определено

Question

Я на самом деле пытаюсь разработать простое приложение, используя хранилища и действия, и реагировать на компоненты, используя гибкий интерфейс, и я столкнулся с проблемой.

На самом деле, в моем методе add() компонента "this" не определено...

Я не знаю, в чем проблема...

Вот мой компонент:

импорт React из 'реакции';

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, что означает, что они не привязывают это автоматически к экземпляру. Вам придется явно использовать.bind(this) или функции arrow =>.

Так что либо вы связываете функцию (что я считаю утомительным):

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

Или вы можете включить и использовать функцию стрелок Babel React ES6+:

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