如何使用 React 在 5 秒后自动触发按钮点击？

Question

我有一个“接受”按钮，我希望 5 秒后自动单击该按钮。我正在将 React 与 Next.js 结合使用。按钮代码为：

<button name="accept" className="alertButtonPrimary" onClick={()=>acceptCall()}>Accept</button>

如果我做不到这一点，我想了解原因，这样我就可以提高我的 React 和 Next.js 技能。

Answer 1

我猜您希望在渲染后 5 秒激活此功能，在这种情况下，请将 setTimeout 放在 useEffect 挂钩内，如下所示。这将在渲染完成后调用钩子中的任何内容。尽管从技术上讲这并没有激活按钮单击事件。

useEffect(() => {
  setTimeout(() => {
     acceptCall()
  }, timeout);
}, [])

在这种情况下你应该像这样使用 ref ，

const App = () => {
  const ref = useRef(null);

  const myfunc = () => {
    console.log("I was activated 5 seconds later");
  };

  useEffect(() => {
    setTimeout(() => {
      ref.current.click();
    }, 5000); //miliseconds
  }, []);

  return (
    <button ref={ref} onClick={myfunc}>
      TEST
    </button>
  );
};

希望这就是您正在寻找的。

https://codesandbox.io/s/use-ref-forked-bl7i0?file=/src/index.js