Javascript 如何在React.js中使按钮交互？

请指出我的错误

我想写一个交互式按钮，显示点击次数。下一次单击时，按钮上的数字必须增加一。初始数字为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>
    );
  }
}

class按钮扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={counter:0}；
};
handleClick（）{
这是我的国家(
prevState=>（{counter:prevState.counter+1}）
);
}
render（）{
返回(
{this.state.counter}
);
}
}

以下是我得到的错误：

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.

TypeError:无法读取未定义的属性“setState”
手舔
src/index.js:30:6
27 | 
28 | render（）{
29 |返回(
>30{this.state.counter}
|      ^  31 |     );
32 |   }
33 | }
视图编译
▶ 20个烟囱框架倒塌。

---

提前谢谢你

在您的示例中，

handleClick（）

函数中的

此

引用了从单击中触发的事件的范围。为了解决这个问题，必须将函数范围绑定到元素

将

this.handleClick=this.handleClick.bind（this）

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

---

您必须绑定单击处理程序：

...
  constructor(props){
    super(props);
    this.state = {counter: 0};
    this.handleClick.bind(this) // <----- here
  }
...

。。。
建造师（道具）{
超级（道具）；
this.state={counter:0}；
this.handleClick.bind（this）//您可以更高级一点，使用ECMAScript 6 arrow函数语法，这样可以避免此类问题，也可以避免使用
.bind（this）

如果你声明
handleClick
像
handleClick=（）=>{}
，你就不需要在构造函数中使用
this.handleClick.bind（this）
。当你使用
this
时，一切都会正常工作，它将是类的
this
，而不是函数的
this

这是使用较新版本的javascript，强烈建议不要使用
.bind（This）
，这可能会导致一些问题

只需像这样声明
handleClick
，它就可以工作，而无需使用
.bind（this）

我认为你有两个选择：

将bind添加到构造函数中。
this.handleClick.bind（this）
，这将确保您的
this
实际引用按钮对象
使用更新的格式，我更喜欢

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


以下是关于许多React主题的更有用的文档：

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