Question

为什么这不是在函数creaseCounter中定义的，而是在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

Answer 2

解释器到达组件时， this.getBadgeClasses（）立即执行。在由 this 引用的对象上调用它，因此函数内的关键字 this 指向同一对象。这样就可以解决对该状态的引用。

另一方面， this.increaseCounter（）不会立即执行。 onClick属性仅存储对该函数的引用。每当用户单击按钮时，都会在全局对象上调用该引用的函数。因此，关键字 this 在严格模式下设置为undefined。要解决此问题，您必须将 increaseCounter（）绑定到构造函数中的 this 。

Answer 3

您必须将this绑定到increaseCounter函数才能访问this对象。这样做：

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

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

3 个答案: