Question

我是React新手，正在研究Adam Freeman's book中的示例。

我从简单的事件处理开始，无法弄清为什么下面的常规样式的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（）需要进行哪些更改？

Answer 1

您可以使用以下任一绑定this，

在构造函数中，

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

或者您可以直接将this绑定为

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

或者仅使用fat arrow语法，

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

Ref

以常规方法符号反应this.setState

1 个答案: