React中ES6 this关键字与箭头函数的onClick事件绑定差异疑问

云原生阿岚

2026-10-6

React onClick 不同绑定写法差异说明

React 事件属性需要接收函数引用作为值，等待事件触发时再调用该函数，同时需要保证函数执行时this指向当前组件实例。以下是不同写法的具体说明：

正常运行写法1：onClick={this.handleClick}
你代码中的handleClick是用箭头函数定义的类属性，箭头函数的this在定义时就绑定了外层作用域（也就是组件实例），这里直接传递函数本身的引用给onClick，点击时React调用该函数，this指向正确，逻辑可以正常执行。
正常运行写法2：onClick={() => this.handleClick()}
这里给onClick传递了一个匿名箭头函数的引用，点击时React先执行这个匿名函数，箭头函数的this继承自render方法的作用域（也就是组件实例），所以可以正常调用this.handleClick执行逻辑。
错误写法1：onClick={this.handleClick()}
代码加了括号后，会在render方法执行时立刻调用handleClick，把函数执行的返回值（该函数没有return，返回值为undefined）传递给onClick。一方面render阶段调用setState会触发无限重渲染，另一方面onClick接收到的是undefined而非可执行的函数，自然会报错。
错误写法2：onClick={handleClick()}
首先你加了括号，同样存在render阶段立刻执行函数的问题；其次在class组件的作用域中，handleClick是挂载在组件实例上的方法，不加this无法直接访问到该变量，会直接抛出引用错误。
错误写法3：onClick={function clickFunction(){this.handleClick()}}
这里传递的是普通函数的引用，普通函数的this是调用时动态绑定的，点击时React调用该普通函数，this并不会指向组件实例（严格模式下默认指向undefined），因此函数内部访问this.handleClick时会找不到对应方法，触发报错。如果要让该写法生效，需要手动绑定this：onClick={function clickFunction(){this.handleClick()}.bind(this)}，但该写法不如箭头函数简洁，实际开发很少使用。