React中为何不能直接将类方法引用传递给onClick？

这个问题的核心是JavaScript中类方法的this绑定规则。

当你把logic.setTheState直接传给onClick时，你传递的只是这个方法的函数引用，而非和logic实例绑定的版本。React触发点击事件时，会直接调用这个函数，此时函数内部的this会丢失绑定（在React默认的严格模式执行环境中，this会变成undefined）。而你的setTheState方法需要通过this.setState访问类内属性，自然就会抛出“Cannot read properties of undefined (reading 'setState')”的错误。

用匿名函数包裹logic.setTheState()时，相当于在函数内部通过logic实例调用方法。此时JavaScript会自动把方法的this绑定到调用它的实例（也就是logic）上，方法内部就能正常访问this.setState了。

两种写法对比 #

• 错误写法（直接传递方法引用）：

<button onClick={logic.setTheState}>点击</button>
// 调用时this是undefined，无法访问this.setState

• 正确写法（匿名函数包裹）：

<button onClick={() => logic.setTheState()}>点击</button>
// 通过logic实例调用方法，this绑定到logic

其他替代方案 #

如果你不想每次都用匿名函数包裹，还有两种常见解决方式：

1. 在类的构造函数中手动绑定this：

class ComponentLogic {
  constructor() {
    // 将setTheState的this绑定到当前实例
    this.setTheState = this.setTheState.bind(this);
  }

  setTheState() {
    this.setState(/* 更新逻辑 */);
  }
}

之后直接传递logic.setTheState给onClick就不会有问题。

2. 用箭头函数定义类方法：
   箭头函数的this是词法绑定的，会继承定义时所在上下文的this（即类实例）：

class ComponentLogic {
  setTheState = () => {
    this.setState(/* 更新逻辑 */);
  }
}

这种方式能让setTheState的this始终绑定到类实例，直接传递给onClick即可正常工作。

内容的提问来源于stack exchange，提问作者Fumée Noire