Javascript React.JS onMouseOver动画失败

我一直在尝试在react.js中使用一个双图像滑块来处理mouseOver事件。我在这里看到了一个类似的组件：codepen.io/bradtraversy/pen/NaKxdP

问题似乎是刷新图像和onMouseOver事件的巨大延迟，这些事件偶尔会触发offsetX坐标，而offsetX坐标与实际情况相差甚远。谢谢你的帮助。下面的codesandbox链接了我遇到的问题的演示

---

我无法确切地解释为什么offsetX会以这种方式运行，也无法验证您刷新图像速度慢但使用您的代码的确切含义。我替换了Sandbox代码：

if (Math.abs(xCoor - e.nativeEvent.offsetX) >= 2)
    setXCoor(e.nativeEvent.offsetX);
console.log(e.nativeEvent.offsetX);

与：

我至少能够在offsetX设置回奇数时修复闪烁

---

根据我在研究这个问题时读到的其他一些东西，offsetX似乎随机提供了不一致的值（正如您所注意到的）。并且可以帮助您进一步设置更一致的内容。

我在这里附上了一个更新的答案：

这将使用对底层DOM节点的引用来访问边界矩形，然后使用JFOX64建议的clientX方法来获取元素本身内的偏移量。我认为他的方法同样有效，我们只是同时发现了它们。谢谢

if (Math.abs(xCoor - e.nativeEvent.clientX) >= 2)
    setXCoor(e.nativeEvent.clientX -5);
console.log(e.nativeEvent.clientX);