如何解决反应:使用状态更改mouseEnter上的图标如果我将鼠标移得太快,图标将停留在“悬停”状态
我有一个带有未选中复选框图标的组件。将鼠标悬停在图标上时,我将显示该图标的选中版本。我正在使用状态将鼠标进入包含图标的div时将isHovered状态设置为true,而当鼠标离开div时将其设置为false。我在div中进行条件渲染,如果isHovered状态为false,则使用未选中的图标,如果isHovered为true,则使用选中的图标。
我的组件在我的应用程序中连续使用了多次,而我的问题是,如果我将鼠标快速移到图标上,即使鼠标不再移到图标上,其中的一些也会停留在isHovered状态下。
是否有解决此问题的建议?
这是我的代码:
const [isHovered,setIsHovered] = useState(false);
const onMouseEnter = () => {
setIsHovered(true);
};
const onMouseLeave = () => {
setIsHovered(false);
};
return (
<div
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={handleArchive}
style={{ display: "flex",alignItems: "center",cursor: "pointer" }}
>
{isHovered ? (
<CheckCircleIcon
style={{ color: "grey",fontSize: 20,marginRight: 10 }}
/>
) : (
<RadioButtonUncheckedIcon
style={{ color: "grey",marginRight: 10 }}
/>
)}
</div>
解决方法
解决方案1:
const [isHovered,setIsHovered] = useState(false);
return (
<div
onMouseEnter={() => setIsHovered(!isHovered)}
onMouseLeave={() => setIsHovered(!isHovered)}
onClick={handleArchive}
style={{ display: "flex",alignItems: "center",cursor: "pointer" }}
>
{isHovered ? (
<CheckCircleIcon
style={{ color: "grey",fontSize: 20,marginRight: 10 }}
/>
) : (
<RadioButtonUncheckedIcon
style={{ color: "grey",marginRight: 10 }}
/>
)}
</div>
解决方案2:一种简单的纯css解决方案
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。