onMouseLeave/onMouseOut 有时会在页面刷新时触发 React

问题描述

我有一张图片，当我将鼠标放在上面时，会触发 onMouseOver 事件并出现动画。然后当我从图像上离开鼠标时，动画结束。

这是我的代码片段，我使用的是 React 和 Mozilla Firefox：

<img className={classNameDefine('presentation__image')}    
    onMouseOver={() => {
       handleAnimation('animationA')
    }} 
    onMouseLeave={() => {
       handleAnimation('animationA')
    }}
src={logo} alt="s"/>

问题是有时当我刷新页面并将鼠标放在图像上时效果很好，但有时在刷新 onMouseLeave 事件时它会无故触发并破坏我的动画。

我尝试使用 onMouseEnter 而不是 onMouseOver 和 onMouseOut 而不是 onMouseLeave，但同样的问题发生了。

为什么有时效果很好，但有时却不行？

PD： 我尝试使用其他导航器（如 Chrome 和 Edge），鼠标事件运行良好，没有错误。现在我不知道 Mozilla（我正在使用的导航器）和 React 之间是否存在问题。仅在 mozilla 上出现此问题。

解决方法

您是否在使用任何类型的 状态 Ref 瞬间。 如果您使用状态，那么它会重新渲染页面，这就是它破坏动画的原因。