如何在反应功能组件中执行超时然后清除超时?

时间:2019-06-14 12:01:13

标签: reactjs functional-programming timeout

嗨,

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

1 个答案:

答案 0 :(得分:4)

您可以使用类似这样的东西。

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 ref中。然后可以使用它检查并清除其他功能中的计时器。