React，Noob问题

Question

通过一些简单的，初学的React挑战并坚持下去。显然我得到了足够的信息来解决这个问题，但不能。尝试了许多不同的代码组合，但仍无效。

挑战：计数器组件跟踪状态中的计数值。有两个按钮调用方法increment（）和decrement（）。编写这些方法，以便在单击相应按钮时计数器值递增或递减1。此外，创建一个reset（）方法，以便在单击重置按钮时，计数设置为0。

注意：请确保不要修改按钮的classNames。

我的代码：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  };
  // change code below this line

  increment() {
    this.setState({
      this.state.count: this.state.count + 1
    });
  };

  decrement() {
    this.setState({
      this.state.count: this.state.count - 1
    });
  };

  reset() {
    this.setState({
      this.state.count: 0
    });
  };

  // change code above this line
  render() {
    return (

   <div>
   <button className='inc' onClick={this.increment}>Increment!</button>
    <button className='dec' onClick={this.decrement}>Decrement!</button>
    <button className='reset' onClick={this.reset}>Reset</button>
    <h1>Current Count: {this.state.count}</h1>
  </div>
    );
  }
};

我做错了什么？

Answer 1

我认为有两件事可能是错的：

1. 不在构造函数
中绑定事件处理程序
2. setState()
中的对象语法无效

在构造函数中，请确保在事件处理程序上使用bind()，以便他们可以访问正确的this上下文：

  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
    this.reset = this.reset.bind(this);
  };

设置状态时，对象语法看起来不对。您无法设置{foo.foo: bar}：

  increment() {
    this.setState({
      count: this.state.count + 1
    });
  };

Answer 2

看起来您没有将this绑定到事件处理函数。

将其添加到构造函数中，它应该可以正常工作。

this.increment = this.increment.bind(this);
this.decrement = this.decrement.bind(this);
this.reset = this.reset.bind(this);

来自React docs：

  

在JSX回调中你必须要小心这个含义。在JavaScript中，默认情况下不会绑定类方法。如果你忘记绑定this.handleClick并将其传递给onClick，那么在实际调用该函数时这将是未定义的。

     

这不是特定于React的行为;它是功能的一部分   在JavaScript中工作。通常，如果你引用一个没有（）的方法   在它之后，例如onClick = {this.handleClick}，你应该绑定它   方法

编辑：查看您的codepen后，您需要将此行添加到文件的底部：

ReactDOM.render(<Counter />, document.getElementById('container'));

阅读this。

Answer 3

您需要绑定方法调用，以便它们正确引用组件实例：

<button className='inc' onClick={this.increment.bind(this)}>Increment!</button>
<button className='dec' onClick={this.decrement.bind(this)}>Decrement!</button>
<button className='reset' onClick={this.reset.bind(this)}>Reset</button>

还有其他策略，比如构造函数中的绑定，

this.increment = this.increment.bind(this); // etc

更多explained in this blog post。