React17如何获取绑定onMouseMove事件的父div自身的鼠标X坐标

React 17 对事件委托机制做了调整，将事件监听器统一挂载到根节点而非 document，如果你在异步逻辑中访问合成事件的 currentTarget，会因为事件对象被回收重置而出现指向根节点的问题，可通过以下两种方案解决：

方案1：使用useRef绑定父容器（最稳定，适用所有场景） #

该方法不受事件回收、异步调用的影响，是通用性最强的解决方案：

import { useRef } from 'react';

function DemoComponent() {
  // 声明ref用于绑定父div
  const parentDivRef = useRef(null);

  const handleMouseMove = (e) => {
    // 获取父div的视口位置参数
    const parentRect = parentDivRef.current.getBoundingClientRect();
    // 计算相对父容器的X坐标，Y坐标同理为 e.clientY - parentRect.top
    const relativeX = e.clientX - parentRect.left;
    console.log('父容器内X坐标：', relativeX);
  };

  return (
    {/* 把ref绑定到目标父div上 */}
    <div ref={parentDivRef} onMouseMove={handleMouseMove}>
      <div>A</div>
      <div>B</div>
      <div>C</div>
    </div>
  );
}

方案2：同步访问currentTarget（仅适合同步处理场景） #

如果你的坐标计算逻辑完全在事件回调的同步执行阶段完成，不需要异步使用事件对象，可直接访问 currentTarget，React 在回调同步执行阶段仍然会将其指向绑定事件的元素：

const handleMouseMove = (e) => {
  // 同步访问currentTarget是生效的
  const parentRect = e.currentTarget.getBoundingClientRect();
  const relativeX = e.clientX - parentRect.left;
  console.log('父容器内X坐标：', relativeX);

  // 错误写法：异步访问会导致currentTarget被重置，指向根节点
  // setTimeout(() => {
  //   console.log(e.currentTarget); // 此时已不是绑定的父div
  // }, 0);
};

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