Reactjs 以常规方法表示法对this.setState进行反应

我是一个React新手，正在研究来自的示例

我从简单的事件处理开始，无法理解为什么下面常规版本的handleClick不起作用。使用书中的箭头符号的方法如预期的那样工作，但我试图将其转换为标准方法符号，并且无法找出缺少的内容

import React, { Component } from "react";

export default class App extends Component {

constructor(props) {
super(props);
this.state = {
  count: 4
 }
}

isEven(val) { return val % 2 === 0 ? "Even" : "Odd"; }

// the following works
//handleClick = () => this.setState({ count: this.state.count + 1 });

// this gives an error: TypeError: Cannot read property 'setState' of undefined
handleClick() {
  this.setState({ count: this.state.count + 1 });
}

render = () =>
<h4>
  <button onClick={this.handleClick}>Click me!</button>
  Number of items: {this.isEven(this.state.count)}
</h4>
}

要使handleclick正常工作，需要进行哪些更改？

您可以使用以下选项之一进行绑定：

在构造函数中

constructor(props) {
super(props);
this.state = {
  count: 4
 }
this.handleClick = this.handleClick.bind(this);
}

或者你可以直接把它绑定为

---

您需要在构造函数中将其绑定为this.handleClick=this.handleClick.bindthis；我会在声明click函数时使用arrow函数：handleClick=>this.setState{}非常感谢可能的副本，我还不太了解它是如何工作的。但它是有效的。也许更多的经验会有所帮助。

<button onClick={this.handleClick.bind(this)}>Click me!</button>

<button onClick={() => this.handleClick()}>Click me!</button>