React表单onSubmit事件中如何触发两个函数？

问题根源 #

表单的onSubmit属性只接受单个事件处理函数，你直接传入两个函数或用&&逻辑判断的写法都是错误的——&&只会执行第一个返回真值的函数，所以才会出现仅一个函数生效的情况。

正确解决方案 #

创建一个包装函数，在内部依次调用两个处理函数，同时处理表单默认提交行为：

1. 修改表单的onSubmit绑定

<form className="restaurant" onSubmit={handleFormSubmit}>
  {/* 你的表单输入项 */}
</form>

2. 编写包装处理函数

const handleFormSubmit = async (e) => {
  // 阻止表单默认提交行为，避免页面刷新丢失状态
  e.preventDefault();

  // 先执行餐厅数据提交逻辑
  await handleSubmit();
  // 再执行复选框对应的用户数据提交逻辑
  handleSubmitVisit();
}

3. 修正原有函数的语法问题

你的handleSubmit开头有多余的}，先修正：

const handleSubmit = () => {
  let rate, rateArray, countRate;
  if (formData.rating === "") {
      rate = 0;
      rateArray = [];
      countRate = 0;
  } else {
      rate = parseFloat(formData.rating);
      rateArray = [parseInt(formData.rating)];
      countRate = 1;
  }
  return fetch('http://localhost:4000/restaurants', {
      method: "POST",
      headers: {
          "Content-Type": "application/json"
      },
      body: JSON.stringify({
          ...formData,
          location: parseFloat(formData.location),
          rating: rate,
          ratingData: rateArray,
          ratingcount: countRate,
          comment: ""
      })
  });
}

4. 优化用户数据提交函数（可选）

给handleSubmitVisit加上return，方便后续异步处理：

const handleSubmitVisit = () => {
  if (checkBox) {
      return fetch('http://localhost:4000/user', {
          method: "POST",
          headers: {
              "Content-Type": "application/json"
          },
          body: JSON.stringify({
              ...formData,
              location: parseFloat(formData.location),
              rating: parseInt(formData.rating),
              ratingData: [parseInt(formData.rating)],
              ratingcount: 1,
              comment: "",
              userrating: parseInt(formData.rating),
              visitCounter: 1,
              id: restaurant.length + 1
          })
      });
  }
}

关键说明 #

• e.preventDefault()是必须的：表单默认提交会刷新页面，导致状态丢失、后续函数无法正常执行。
• async/await用于保证请求顺序：如果不需要严格顺序，可以去掉await，但建议保留以避免竞态问题。

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