React中如何在onClick事件回调中同时执行handleClose和saveData两个函数

针对你需要在Save按钮的点击事件中同时执行handleClose和saveData两个函数的需求，有两种常用实现方案，可根据业务逻辑选择：

• 方案1：点击后立刻执行两个函数，无需等待saveData的异步请求完成
  直接修改按钮的onClick绑定逻辑即可，修改后的代码如下：

<Button variant="contained" onClick={() => {
  saveData()
  handleClose()
}}>
  Save
</Button>

原理是React的onClick属性接受函数作为参数，我们可以传入一个自定义匿名箭头函数，在函数内部按顺序调用你需要执行的多个方法即可。

• 方案2：等待saveData的提交请求完成后再关闭弹窗
  这是更推荐的表单提交逻辑，避免请求未完成就关闭弹窗导致用户感知不到提交结果。你提供的现有代码已经在saveData方法的fetch请求成功回调中调用了handleClose，无需额外修改按钮代码即可实现该逻辑。如果需要调整执行时机，直接修改saveData内部的代码顺序即可。

内容的提问来源于stack exchange，提问作者nipoo