如何在React函数组件中设置超时并清除超时？

Question

你好，

我在ReactJS中有一个功能组件，并尝试对菜单鼠标悬停进行超时，这很好且能正常工作，但我不知道如何在该同一功能组件的其他函数中清除此超时，是否有解决方案？ 我主要使用hooks。 我找到了一些hooks超时，但效果不佳。 非常感谢。

- LiH

---

你能贴一些代码吗？ - Harsh kurra

这是一个功能组件，我在其中捕获了 onMouseEnter 事件，我需要在那里调用 timeout，然后在另一个函数（onMouseLeave）中终止它（使用 clearTimeout）。我只需要知道如何在功能组件中使用 timeout/cleartimeout 或者 hooks。 - LiH

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} />
}

这里正在发生的是，我们将定时器的引用保存在React引用中。这可以在另一个函数中用于检查和清除计时器。

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

- johnny peter