反应 Link 按钮超时

Question

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

谢谢

Answer 1

听起来您想使用 setTimeout。如果将 setTimeout 包装在按钮的 onClick 方法周围，那么您将能够引入延迟。

例如，这是一个按钮，当您单击它时，它会等待 3 秒（3000 毫秒），然后才会在另一个选项卡中打开 Stack Overflow：

<button
  onClick={() => setTimeout(() => window.open("https://whosebug.com/"), 3000)}
>
  Click me!
</button>

Answer 2

<button
  onClick={() => setTimeout(() => window.open("url", '_blank'), 3000)}
>
  I will run after 3 seconds
</button>

这行得通！

或尝试使用 react-router-dom

中的 useNavigate

Answer 3

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

示例：

使用点击处理程序来阻止默认的 link 操作，这样您就可以“注入”您的延迟导航。使用 React ref 存储对计时器的引用，并使用挂载 useEffect 挂钩清除任何运行计时器，以防组件在到期前卸载。使用 useNavigate 挂钩然后使用所有适当的参数强制导航。

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>

反应 Link 按钮超时

React Link To button timeout

settimeout

reactjs

react-router-dom