React类组件handleIncrement方法this为undefined其他方法正常原因咨询

核心原因是两个方法的调用模式完全不同： #

• getBadgeClasses()的调用场景：
  你在render方法里是通过this.getBadgeClasses()的形式直接调用的，属于对象方法调用模式，JavaScript中这种调用方式下，this会自动绑定到调用方法的对象，也就是当前Counter类的实例，所以能正常访问this.state等实例属性。
• handleIncrement的调用场景：
  你给onClick属性传递的是this.handleIncrement，这是把方法的引用直接传给了React事件系统，没有绑定上下文。当点击事件触发时，React会直接调用这个函数，而非通过实例.handleIncrement()的形式调用。再加上类的普通方法默认不会绑定this，严格模式下普通函数直接调用时this取值为undefined，就出现了你遇到的打印结果。

常用的修复方案有三种： #

• 方案1：在构造函数中手动绑定this

constructor(props) {
  super(props);
  this.handleIncrement = this.handleIncrement.bind(this);
}

• 方案2：事件绑定处用箭头函数包裹调用

<button onClick={() => this.handleIncrement()} className="btn btn-secondary btn-sm">
  Increment
</button>

• 方案3：将方法定义为类属性箭头函数（最简洁的常用方案）

handleIncrement = () => {
  console.log(this);
}

这种写法下handleIncrement的this会永久绑定到当前类实例，传递引用也不会丢失上下文。

内容的提问来源于stack exchange，提问作者Zain Sahi