如何在react功能组件中设置超时然后清除超时？

Question

嗨，

我在reactjs中有功能组件，我试图在鼠标悬停在菜单上时进行超时，这很好并且工作得很好，但我不知道如何在同一功能组件中的其他功能中清除此超时，是否有一些解决方案为了这？我主要使用钩子。我发现一些钩子超时，但效果不佳。 非常感谢

Answer 1

你可以使用这样的东西。

import React, { useRef } from 'react';

const Menu = () => {
  const timerRef = useRef(null);

  const onMouseEnter = () => {
    timerRef.current = setTimeout(() => {}, 1000);
  }

  const onMouseLeave = () => {
    if(timerRef.current) {
      clearTimeout(timerRef.current);
    }
  }

  return <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />
}

这里发生的事情是，我们将计时器的引用保存在反应引用中。然后可以用它来检查和清除另一个函数中的计时器。

Answer 2

我很欣赏约翰尼·彼得的回答。我必须做类似的事情，但使用

useEffect

来开始

setTimeout

。就我而言，我将

onMouseEnter

函数替换为

  useEffect(() => {
    timerRef.current = setTimeout(onClose, duration);
    // don't forget to clean up!
    return () => clearTimeout(timerRef.current);
  }, [duration, onClose]);

目前正在运行（React 18）。