反应：使用状态更改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解决方案