0

私は実際にストアとアクションを使用して単純なアプリケーションを開発し、fluxible を使用してコンポーネントを反応させようとしていますが、問題に直面しています。

実際、私のコンポーネント メソッド add() では、「これ」は未定義です...

何が問題なのかわからない...

ここに私のコンポーネントがあります:

「react」から 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;
4

2 に答える 2

0

ドキュメントから：

メソッドは、通常の ES6 クラスと同じセマンティクスに従います。つまり、メソッドはこれをインスタンスに自動的にバインドしません。.bind(this) またはアロー関数 => を明示的に使用する必要があります。

したがって、関数をバインドします（これは面倒だと思います）：

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

または、 Babel React ES6+ 矢印関数機能を有効にして活用することもできます。

add = (e) => {
    this.context.dispatch('ADD_ITEM', {name:'Marvin'});
}
于 2015-09-03T13:07:03.930 に答える