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

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

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

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

Answer 2

您可以更高级一些，并使用ECMAScript 6箭头函数语法，这样可以避免此类问题，也无需使用.bind(this)。

如果像handleClick那样声明handleClick = () => {}，则不需要在构造函数this.handleClick.bind(this)中使用。当您使用this时，一切都会正常运行，它将是类的this，而不是函数的this。

这使用的是javascript的较新版本，强烈建议不要使用.bind(this)，这可能会导致某些问题。

只需像这样声明handleClick，它就可以使用而无需使用.bind(this)

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

Answer 3

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

df1 = df[df['D'].str.len() != 0]

Answer 4

我认为您有两种选择：

将绑定添加到您的构造函数。 this.handleClick.bind(this)，这将确保您的this实际引用按钮对象。

使用更新的格式，我更喜欢。

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

这里有许多关于React主题的有用文档：https://reactjs.org/docs/react-component.html

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

4 个答案: