javascript - How do I automatically trigger a button click after 5 seconds with React? - Stack Overflow

admin管理员组

文章数量:1289548

I have an 'Accept' button which I would like to be automatically clicked after 5 seconds. I'm using React with Next.js. The button code is:

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

If I can't do this, I would like to understand why, so I can improve my React and Next.js skills.

I have an 'Accept' button which I would like to be automatically clicked after 5 seconds. I'm using React with Next.js. The button code is:

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

If I can't do this, I would like to understand why, so I can improve my React and Next.js skills.

• javascript
• reactjs
• next.js

Share Improve this question Follow asked Jan 12, 2021 at 14:31 Bruce SeymourBruce Seymour 1,59811 gold badge1717 silver badges2525 bronze badges 6

• 3 Instead of automatically clicking the button, why not just automatically call the acceptCall function? Either way, you're probably looking for something with setTimeout – Brian Thompson Commented Jan 12, 2021 at 14:32
• 1 Or are you trying to run the handler function 5s after the button was clicked? If so look into debouce functions, there are many examples on the web. – Kyle Lambert Commented Jan 12, 2021 at 14:34
• I tired to automatically call the acceptCall function but it ends up re-rendering the page and calling the function infinitely. I tried {acceptCall} {acceptCall()} {()=>acceptCall()}. Plus, I like the idea of the option to click the button but after 5 seconds it clicks anyway. – Bruce Seymour Commented Jan 12, 2021 at 14:38
• 1 Assuming functional ponent, you'd need to put the timeout inside a useEffect with an empty dependency array so that it only runs one time. If in a class ponent, put it inside ponentDidMount. – Brian Thompson Commented Jan 12, 2021 at 14:43
• Is there an example or reference to a useEffect with an empty dependency array so that it only runs one time? Thank you sincerely for the help! – Bruce Seymour Commented Jan 12, 2021 at 14:48

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 6

I'm guessing you want this activated 5 seconds after render, in that case, put a setTimeout inside of the useEffect hook, like so. this will call whatever is in the hook after the render is plete. Although this isn't technically activating the button click event.

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

in that case you should use a ref like so,

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

Hopefully, this is what you are looking for.

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

You could create a ref for the <button> and set a timeout inside of an effect hook to call the button click event after 5 seconds.

You could throw in a state hook to limit the prompt.

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;

本文标签： javascriptHow do I automatically trigger a button click after 5 seconds with ReactStack Overflow