reactjs - react 链接到按钮超时

Question

我有一个简单的按钮，当我点击他时，他会将我重定向到网站中的另一个页面 现在使用 react 路由器( <Link to=''> )。现在我想要的是当我点击按钮时他等待 3 秒然后重定向我 我怎样才能做到这一点？

谢谢

Answer 1

您可以创建一个需要额外延迟的自定义链接组件。

示例:

使用点击处理程序来阻止默认链接操作，以便您可以“注入(inject)”延迟导航。使用 React ref 存储对计时器的引用，并使用安装 useEffect Hook 来清除任何正在运行的计时器，以防组件在到期之前卸载。使用 useNavigate Hook ，然后使用所有适当的参数进行命令式导航。

import { Link } from 'react-router-dom';

const DelayedLink = ({ delay, replace, state, to, ...props }) => {
  const navigate = useNavigate();
  const timerRef = useRef();

  useEffect(() => () => clearTimeout(timerRef.current), []);

  const clickHandler = (e) => {
    e.preventDefault();
    timerRef.current = setTimeout(navigate, delay, to, { replace, state });
  };

  return <Link to={to} {...props} onClick={clickHandler} />;
};

用法:

<DelayedLink delay={3000} to="/test">
  Test
</DelayedLink>
<DelayedLink delay={3000} to="/test" state="foobar">
  Test w/state
</DelayedLink>
<DelayedLink to="/test">Test w/o delay</DelayedLink>