Javascript &引用；这"；未在事件处理程序中定义

为什么这不是在函数increaseCounter中定义的，而是在getBadgeClass函数中定义的

增量
getBadgeClasses（）{
let classes=“badge m-2 badge-”；
classes+=this.state.count==0？“警告”：“主要”；
返回类；
}
递增计数器（）{
this.state.count++；
}

当解释器到达组件时，这个.getBadgeClasses（）立即执行。它在this引用的对象上调用，因此函数中的关键字this指向同一对象。因此，它能够解析对状态的引用

---

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

必须将

this

绑定到

递增计数器

函数才能访问

this

对象。这样做：

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

增量

您应该绑定使用此

的函数。要保存此

上下文，可以使用以下方法之一： 1） 构造函数中的绑定函数：

constructor(props) {
  super(props);

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

2） 也可以使用箭头功能。它还保存了

此
上下文：

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

您可以在此处阅读更多内容：
调用上下文是不同的。请尝试
onClick={（）=>this.increaseCounter（）}
或
onClick={this.increaseCounter.bind（this）}
可能重复的，不要像
this.state.count++那样分配给状态this.setState（prevState=>（{count:prevState.count+1}））
increaseCounter = () => {
 ...your code
}