javascript - 如何在 React.js 中使按钮具有交互性？

Question

请指出我的错误。

我想写一个交互式按钮，显示点击次数。每次单击，按钮上的数字都必须增加一个。初始数字为 0，因此，例如，点击 5 次后变为 5。如果没有交互元素，代码将正常呈现。

这是我的代码:

class Button extends React.Component{
  constructor(props){
    super(props);
    this.state = {counter: 0};
  };

  handleClick(){
    this.setState(
      prevState => ({counter: prevState.counter + 1})
    );
  }

  render(){
    return (
      <button onClick={this.handleClick}>{this.state.counter}</button>
    );
  }
}

这是我得到的错误:

TypeError: Cannot read property 'setState' of undefined
handleClick
src/index.js:30:6
  27 | 
  28 |   render(){
  29 |     return (
> 30 |       <button onClick={this.handleClick}>{this.state.counter}</button>
     |      ^  31 |     );
  32 |   }
  33 | }
View compiled
▶ 20 stack frames were collapsed.

提前致谢!

Answer 1

在您的示例中，您的 handleClick() 函数中的 this 指的是从您的点击中触发的事件的范围。为了解决这个问题，您必须将函数作用域绑定(bind)到元素。

将 this.handleClick = this.handleClick.bind(this) 添加到您的构造函数中，它应该可以正常工作。

https://reactjs.org/docs/handling-events.html