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

如果@ Bartek的回答没有解决您的问题，另一个要查看的区域是您的Button组件......您是否将onClick道具传递给实际的DOM元件？

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

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

2 个答案: