React中对象方法作DOM事件处理器时this为undefined的文档在哪

原生JS示例的认知偏差 #

你给出的原生JS和React对比示例写法本身不对等，不存在React修改原生DOMthis绑定逻辑的情况：

• 原生内联事件写法<button onclick="o.showThis()">Show "this"</button>的执行逻辑是被包裹在匿名函数中，通过o.showThis()的形式显式以o为调用主体执行方法，这种情况下this自然指向实例o，等价于如下原生JS代码：

button.addEventListener('click', function() {
  o.showThis()
})

• 如果在原生JS中采用和React完全一致的写法，直接把方法引用传给事件监听：button.addEventListener('click', o.showThis)，此时函数脱离了原对象的上下文，this不会自动指向原对象，在严格模式下拿到的就是undefined，这是JavaScript本身的函数运行规则，和React无关。

React官方文档的对应说明 #

该行为在React官方文档的事件处理章节有明确解释，核心规则如下：

• JSX中写onClick={o.showThis}时，是直接将函数引用作为属性值传递，传递过程中函数会丢失原有的对象上下文
• React的合成事件系统不会自动为传入的回调函数绑定this上下文
• 类组件场景下，如果不对事件处理方法做显式的this绑定，事件触发时方法内的this会是undefined，这一表现完全遵循JavaScript原生的this绑定逻辑，并非React做了特殊修改。

文档同时给出了三种常规解决this丢失的方案：

• 在类构造函数中使用.bind()手动绑定方法的this指向组件实例
• 使用类字段箭头函数定义事件处理方法，利用箭头函数不绑定自身this的特性继承外层作用域的实例指向
• 在JSX的事件属性中用箭头函数包裹事件处理方法的调用，显式指定调用主体。

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