如何在 ReactJS Typescript 中 2 分钟后自动发生 onclick

Posted 2023-02-22

【中文标题】如何在 ReactJS Typescript 中 2 分钟后自动发生 onclick

【英文标题】：How to make an onclick automatically happen after 2 minutes in ReactJS Typescript

【发布时间】：2022-01-16 15:20:49

【问题描述】：

我打算在 2 分钟后自动制作一个按钮 onClick 功能。这是我当前的按钮，我正在调用的函数是处理事件视频。

如何触发按钮在 2 分钟后自动单击。我计划创建一个新函数并在那里调用handleEventVideos()，然后将该函数传递给useEffect。但这不起作用。谁能帮助我如何做到这一点？

                     <Button
                        disabled=isDisable
                        type="submit"
                        onClick=() => handleEventVideos()
                        variant="contained"
                        className=classes.doneButton
                      >
                        Done
                      </Button>

【问题讨论】：

您可以使用 setTimeout() 函数在 2 分钟后自动触发 语法： setTimeout(function() alert("Hello"); , 3000);

【参考方案1】：

如果您想在您的示例中调用 onclick 函数，您可以使用 setTimeout 并调用 handleEventVideos 函数。应该是这样的：

document.addEventListener('DOMContentLoaded', function() 
  setTimeout(()=>
    alert("your function of interest!")
  ,2000);
);

但是，如果您的函数中不需要事件变量（如您在此处的示例），则会出现这种情况。但是，如果您想通过定义 ref 并调用其 click 函数来调用 react click 事件。您可以在此处找到扩展解决方案： How to manually trigger click event in ReactJS? 如果您想以 2 秒的延迟调用它，您只需要以与上面相同的方式使用 setTimeout 函数。

【讨论】：

你的意思是这样吗？ document.addEventListener('DOMContentLoaded', function() setTimeout(() => handleEventVideos(); , 1000); );

是的，这是我在帖子中提到的第一种方法。一秒后执行。

我试过了。但它不会自动执行。我也尝试了参考，但对于打字稿它显示错误。

这里是一个沙箱链接来说明第一种方法。：codesandbox.io/s/method1-qz8tm 我很快就会发送另一个链接来说明第二种方法。

这里是第二种方法的链接：codesandbox.io/s/method2-7tpio?file=/src/App.js

【参考方案2】：

此警报将在 2 分钟后弹出。你可以把警报代替 你的 onclick 函数在那里。

const OnClick =()=> 
  setTimeout(()=>
    alert("I will pop up after 2 minutes")
  ,20000);
);