如何使用 React 17 获取 div（而不是其子项）的鼠标事件的鼠标 X 位置？

Question

我有一个简单的片段，将onMouseMove侦听器附加到给定的 div：

<div onMouseMove={handleMouseMove}>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

我想知道鼠标指针在我附加鼠标侦听器的父 div 中的 X 位置。然而，该事件似乎只包含对子 div (as target) 和根 (as currentTarget) 的引用。

该事件的nativeEvent属性似乎也没有帮助。

我使用的是 React 17。我认为这使得事情变得更加困难，因为之前会currentTarget指向我放置侦听器的 div，但在 React 17 上，这些侦听器指向根。

如何获取我附加监听器的 div 内的坐标？

谢谢！

Answer 1

react这在版本中按预期工作17.0.2

function Component() {
  const onMouseMove = (e) => {
    let rect = e.currentTarget.getBoundingClientRect();
    let x = e.clientX - rect.left;
    let y = e.clientY - rect.top;

    console.log(x, y);
  };
  return (
    <div onMouseMove={onMouseMove}>
      <div>A</div>
      <div>B</div>
      <div>C</div>
    </div>
  );
}

根据这个答案和对其的评论，关于使用currentTarget