“this”未在事件处理程序中定义

Question

为什么这没有在函数increaseCounter中定义，而是在getBadgeClass函数中定义？

<button onClick = { this.increaseCounter } className = { 
this.getBadgeClasses() }>increment</button>

getBadgeClasses() {         
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
}

 increaseCounter(){
    this.state.count++;
}

Answer 1

您应该绑定使用的函数this。要保存this上下文，您可以使用以下方法之一： 1) 在构造函数中绑定函数：

constructor(props) {
  super(props);

  this.getBadgeClasses = this.getBadgeClasses.bind(this);
  this.increaseCounter = this.increaseCounter.bind(this);
}

2）或者你可以使用箭头功能。它还保存this上下文：

increaseCounter = () => {
 ...your code
}

您可以在这里阅读更多信息：https://medium.com/silesis/handle-events-in-react-with-arrow-functions-ede88184bbb#4803