在沒有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內部的方法將不再指向實際調用該函數的組件實例。所以，你應該這樣做：

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

Answer 2

如果@鮑爾泰克的回答沒有解決您的問題，另一個方面看是你的Button組件...你傳遞onClick道具到實際的DOM元素？

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