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

【问题标题】：How do I automatically trigger a button click after 5 seconds with React?如何使用 React 在 5 秒后自动触发按钮单击？
【发布时间】：2021-01-12 14:31:30
【问题描述】：

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

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

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

【问题讨论】：

不自动点击按钮，为什么不自动调用acceptCall函数呢？无论哪种方式，您都可能正在寻找 setTimeout 的内容
或者您是否尝试在单击按钮后 5 秒运行处理程序函数？如果是这样，请查看 debouce 函数，网络上有很多示例。
我厌倦了自动调用 acceptCall 函数，但它最终会重新渲染页面并无限调用该函数。我试过 {acceptCall} {acceptCall()} {()=>acceptCall()}。另外，我喜欢点击按钮选项的想法，但 5 秒后它还是会点击。
假设是功能组件，您需要将超时放在带有空依赖数组的useEffect 中，以便它只运行一次。如果在类组件中，请将其放在 componentDidMount 中。
是否有一个示例或引用一个带有空依赖数组的 useEffect 以便它只运行一次？衷心感谢您的帮助！

标签： javascript reactjs next.js

【解决方案1】：

我猜你想在渲染后 5 秒激活它，在这种情况下，在 useEffect 钩子中放置一个 setTimeout，就像这样。这将在渲染完成后调用钩子中的任何内容。虽然这在技术上并没有激活按钮点击事件。

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>
  );
};

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

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

【讨论】：

【解决方案2】：

您可以为<button> 创建一个ref 并在效果挂钩内设置超时以在5 秒后调用按钮单击事件。

你可以抛出一个状态钩子来限制提示。

import React, { useEffect, useRef, useState } from "react";

const App = () => {
  const buttonRef = useRef("accept-button");
  const [accepted, setAccepted] = useState(false);

  const acceptCall = (e) => {
    alert("Accepted");
  };

  const fireEvent = (el, eventName) => {
    const event = new Event(eventName, { bubbles: true });
    el.dispatchEvent(event);
  };

  useEffect(() => {
    if (!accepted) {
      setTimeout(() => {
        if (buttonRef.current instanceof Element) {
          setAccepted(true);
          fireEvent(buttonRef.current, "click");
        }
      }, 5000);
    }
  }, [accepted]);

  return (
    <div className="App">
      <button
        name="accept"
        className="alertButtonPrimary"
        ref={buttonRef}
        onClick={acceptCall}
      >
        Accept
      </button>
    </div>
  );
};

export default App;

【讨论】：

使用 setInterval 而不是 setTimeout 每 5 秒重试一次。感谢大家的帮助！