反应 onMouseEnter 和 onMouseLeave 错误，无法一致工作

Question

onMouseEnter我在使用 React时遇到问题onMouseLeave，有时事件在应该触发时没有触发

我正在使用onMouseEnter并onMouseLeave显示/隐藏 React Portal Modal 工具提示面板：

问题：

如果鼠标光标缓慢地悬停在图像上，onMouseEnter并且onMouseLeave按预期工作，但是如果鼠标光标快速（水平）悬停在图像上，则代码中断，并显示多个工具提示面板（因为onMouseLeave未能触发）

这是我提到的错误的codesandbox链接： https ://codesandbox.io/s/epic-satoshi-rjk38e

任何帮助表示赞赏

Answer 1

“丢失事件”的原因不是事件侦听器未触发。问题在于，您将在虚拟 DOM 上运行的 React 代码与在浏览器 DOM 上运行的“经典”JS 代码混合在一起。大多数时候这两个 DOM 不同步，这会导致您看到的问题。

尝试删除所有直接访问 DOM 并仅对 React 组件（即虚拟 DOM）进行操作的代码。

下面是一个如何以 React-only 风格实现工具提示的精简示例：