React中event.currentTarget为null时如何获取事件绑定的元素？

问题原因说明 #

• this = undefined：你使用箭头函数作为事件回调，箭头函数本身不绑定独立的this，会继承外层作用域的this。如果是在函数组件内编写，外层作用域本身无this，所以返回undefined属于正常情况，获取绑定元素不需要依赖this。
• event.currentTarget = null：React使用合成事件机制，事件对象会被池化复用，回调函数同步执行完成后，事件对象的所有属性会被清空重置。如果你在异步逻辑（setTimeout、Promise回调等）中访问currentTarget，就会拿到null值。

解决方案 #

方案1：同步场景直接访问 #

如果不需要在异步逻辑中使用绑定元素，直接在事件回调同步代码中读取event.currentTarget即可，currentTarget始终指向绑定事件的元素，而event.target指向实际触发事件的元素（示例中移入span时target就是span元素）：

<div onMouseEnter={(event) => {
  // 同步读取直接拿到绑定事件的div元素
  const bindElement = event.currentTarget;
  console.log(bindElement);
}}>
  <span>HELLO</span>
</div>

方案2：异步场景提前缓存值 #

如果需要在异步逻辑中使用元素，提前把event.currentTarget的值存到变量中，不要在异步回调里再读取事件对象的属性：

<div onMouseEnter={(event) => {
  // 提前缓存绑定元素
  const bindElement = event.currentTarget;
  setTimeout(() => {
    // 异步逻辑直接使用缓存的变量，不会出现null
    console.log(bindElement);
  }, 1000)
}}>
  <span>HELLO</span>
</div>

方案3：使用useRef绑定DOM（更稳定） #

如果你不想依赖事件对象获取元素，可以用useRef直接绑定目标DOM，任意场景都可以直接读取：

import { useRef } from 'react';

function Demo() {
  // 初始化ref
  const divRef = useRef(null);
  return (
    <div 
      ref={divRef} 
      onMouseEnter={() => {
        // 直接从ref读取绑定的div元素
        console.log(divRef.current);
      }}
    >
      <span>HELLO</span>
    </div>
  )
}

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