Question

当我将鼠标悬停在svg（一个国家的图像）上时，我会触发mouseEnter事件，而当我将其离开时会触发mouseLeave-但是我的SVG位于地图中，因此彼此相邻堆叠。我有一个div，当我在一个国家上空时，我想进入不透明度1，但是当你不在一个国家上时，它会逐渐消失。这意味着，如果您去附近的国家，则必须取消动画，但是动画对我不起作用。

我尝试了各种不同的方法来取消超时，以及将计时器附加到窗口对象。

这就是我所拥有的，任何人都可以看到它的问题吗？

 const [opac, setOpac] = useState(0);

let timer = 0;

  const mouseEnter = geography => {

    clearTimeout(timer)

    setOpac(1);
  };

  const mouseLeave = geography => {

   timer = setTimeout(() => {
      setOpac(0);
    }, 500);
  };


return (
                      <Geography
                        key={i}
                        geography={geography}
                        projection={projection}
                        onClick={handleClick}
                        onMouseEnter={mouseEnter}
                        onMouseLeave={mouseLeave}

                        style={{
                          default: {
                            fill: exposureScale(
                              dict[geography.properties["Alpha-2"]]
                            ),
                            stroke: "#607D8B",
                            strokeWidth: 0.75,
                            outline: "none"
                          },
                          hover: {
                            fill: "#607D8B",
                            stroke: "#607D8B",
                            strokeWidth: 0.75,
                            outline: "none"
                          },
                          pressed: {
                            fill: "#FF5722",
                            stroke: "#607D8B",
                            strokeWidth: 0.75,
                            outline: "none"
                          }
                        }}
                      />

Answer 1

为此，您应该使用useEffect。

像这样：

useEffect(() => {
  const timer = setTimeout(() => {
    // do something here
  }, 1000);
  return () => clearTimeout(timer);
}, []);

React将调用函数useEffect返回以取消效果。

但是对于您的用例，您实际上并不需要useEffect或超时。

这是一个有效的示例：

无法清除超时React功能组件

1 个答案: