在没有es6脚本的情况下获取prevstate反应

问题描述：

我编写了一些脚本，当我们点击reactjs中的按钮时将会统计数字。这是我的脚本：在没有es6脚本的情况下获取prevstate反应

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'));

但它不工作，要么当我点击的按钮。

你能解决它并解释原因吗？

谢谢:)

oopss我忘了Button标签是我的反应组件..v。 – cahyowhy

所以你的问题解决了？ –

答

您应该将上下文绑定到您的点击处理程序方法。否则this内部的方法将不再指向实际调用该函数的组件实例。所以，你应该这样做：

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

答

如果@鲍尔泰克的回答没有解决您的问题，另一个方面看是你的Button组件...你传递onClick道具到实际的DOM元素？

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

在没有es6脚本的情况下获取prevstate反应

相关推荐