es6スクリプトのない反応でprevstateを取得

Question

私はreactjsのボタンをクリックすると数を数えるスクリプトを書きます。これは私のスクリプトです：

var ComponentCounter = React.createClass({ 
    getInitialState: function() { 
    return {count: 1}; 
    }, 
    doIncrement:function(){ 
    this.setState(function(prevState,currentProps){ 
     return { 
     count:prevState.count+1 
     }; 
    }); 
    }, 
    doDecrement:function(){ 
    this.setState(function(prevState,currentProps){ 
     return { 
     count:prevState.count-1 
     }; 
    }); 
    }, 
    render: function(){ 
    return(
     <div> 
      <Button onClick={this.doIncrement}>+</Button> 
      <h2>{this.state.count}</h2> 
      <Button onClick={this.doDecrement}>-</Button> 
     </div>); 
    } 
}); 
ReactDOM.render(<ComponentCounter/>,document.getElementById('counter')); 

ボタンをクリックしても動作しません。

修正して理由を説明できますか？

ありがとう:)

Answer 1

クリックハンドラメソッドにコンテキストをバインドする必要があります。それ以外の場合、メソッド内のthisは、実際に関数が呼び出されたときにコンポーネントインスタンスを指していません。だから、あなたがこれを行う必要があります。Bartekの答えはあなたの問題を解決していない@場合

<Button onClick={this.doIncrement.bind(this)}>+</Button> 
    <h2>{this.state.count}</h2> 
    <Button onClick={this.doDecrement.bind(this)}>-</Button> 

Answer 2

を、見て、他の領域は、あなたのButtonコンポーネントです...あなたは、実際のDOM要素にonClick小道具を渡していますか？

var Button = createClass({ 
    ... 
    render: function() { 
    return <button onClick={this.props.onChange}>{this.props.children}</button>; 
    //or 
    return <button {...this.props} />; 
    } 
});