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

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

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