如何为按钮的onClick事件绑定两个函数？

下面提供几种适配你React代码场景的可行实现方式：

方式一：直接在onClick中调用两个函数 #

如果不需要严格的执行顺序，可以直接在onClick的箭头函数里依次调用两个方法，注意把事件对象传递给submitHandler：

<input
  type="submit"
  value="Add"
  onClick={(e) => {
    submitHandler(e);
    imageUpload();
  }}
/>

这种方式下两个异步操作是并行执行的，彼此不会等待对方完成。如果需要确保其中一个操作完成后再执行另一个，建议使用下面的封装方法。

方式二：封装统一的处理函数（推荐） #

把两个操作封装成一个新的异步函数，既能灵活控制执行顺序，也能统一处理错误：

1. 先修改imageUpload为async函数（统一异步写法） #

const imageUpload = async () => {
  const imageRef = ref(storage, `image/${uploadImage.name}`);
  await uploadBytes(imageRef, uploadImage);
  alert("Image Uploaded");
};

2. 创建统一的点击处理函数 #

const handleAddAction = async (e) => {
  e.preventDefault();
  try {
    // 方案A：先执行Firestore写入，完成后再上传图片
    await submitHandler(e);
    await imageUpload();

    // 方案B：用Promise.all并行执行两个操作，提升效率
    // await Promise.all([submitHandler(e), imageUpload()]);
  } catch (err) {
    alert(err);
  }
};

3. 绑定到按钮的onClick #

<input
  type="submit"
  value="Add"
  onClick={handleAddAction}
/>

注意事项 #

• 确保uploadImage变量已正确获取到用户选择的文件，否则图片上传会失败
• 如果需要在两个操作都完成后做额外处理（比如统一提示用户操作完成），可以放在try块的最后
• 错误处理可根据需求调整，比如区分数据库写入错误和图片上传错误

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