onClick 事件中的多个函数

Question

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

问题:

我尝试在 onClick event 上分别调用这两个函数。执行此操作时，函数 handleChange 有效，而 onSubmit 无效。

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

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

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




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

我觉得哪里有问题:

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

但是，如果我尝试使用 alert();，则会显示两个函数，但是 我希望 handleChange(); 先到运行，然后是另一个 .

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

编辑

我的提交功能：

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

我的 handleChange 函数：

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

我的点击事件：

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

Answer 1

用 0 毫秒将 handleChange() 之后要执行的函数或语句包装在 setTimeout 内。这将确保在所有同步任务完成执行后执行函数或语句（在本例中 handleChange()）。

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

onClick 事件中的多个函数

Multiple function in onClick event

reactjs

button

onclick

toast