时间戳

首页 > 解决方案 > onClick 事件中的多个函数

reactjs - onClick 事件中的多个函数

问题描述

我有一个带有onclick event. 此按钮关闭对话框并更改其值。我有两个功能，一个是更改按钮值handleChange，另一个是关闭对话框并显示警报以确认onSubmit。

问题：

我尝试在onClick event. 执行此操作时，该功能handleChange有效，而该 功能onSubmit无效。

onClick={() => {
             handleChange();
            onSubmit();
          }}

所以我尝试在 handleChange 函数内部 调用onSubmit函数。

 const onSubmit = ()=> {
    reset();
    toast("Default Notification !");
   
    handleChange();
   };




onClick={() => {
            
            onSubmit();
          }}

我认为这是问题所在：

我的onSubmit函数有一个关于这个库的警报https://fkhadra.github.io/react-toastify/introduction/并且不能更改为另一个库或简单的alert();

但是，如果我尝试alert(); 显示两个函数，但我希望 handleChange();先运行，然后再运行另一个。

为此，我尝试onSubmit在内部调用我的函数，handleChange(); 但它不起作用。还尝试更改onclick事件中调用函数的顺序，但它也不起作用

编辑

我的提交功能：

const onSubmit = ()=> {
    reset();
    alert("Default Notification !");
   
    handleChange();
   };

我的 handleChange 函数：

 const handleChange = () => {
    setChange((prevState) => (prevState === 2 ? 0 : prevState + 1));
  };

我的点击事件：

<Button
      variant="contained"
      onClick={() => {
        // handleChange();
        onSubmit();
      }}
    >

标签： reactjsbuttononclicktoast

解决方案

将要执行的函数或语句包裹在0 毫秒内handleChange()。setTimeout这将确保函数或语句在所有同步任务完成执行后执行（在这种情况下handleChange()）。

const onSubmit = () => {
  handleChange();
  setTimeout(() => {
    alert("Default notification");   // or any other function or statement you want to execute after handleChange().
  }, 0);
};

推荐阅读