React中如何使用单个按钮提交多个功能不同的独立表单

结论 #

完全可以实现，无论是原生JS开发还是使用React/Vue等组件化框架都有成熟的实现方式。

原生JavaScript实现示例 #

针对你给出的DOM结构，可以直接通过遍历表单元素触发提交事件：

<form id="form1">
    <input name="field1" type="text" />
</form>
<form id="form2">
    <input name="field2" type="text" />
</form>
<form id="form3">
    <input name="field3" type="text" />
</form>
<button id="submitAll">提交所有表单</button>

<script>
// 先给每个表单绑定自定义的onsubmit逻辑
document.getElementById('form1').onsubmit = function(e) {
  e.preventDefault();
  // 这里写表单1的提交逻辑，比如向对应API发请求
  const formData = new FormData(this);
  console.log('提交表单1', Object.fromEntries(formData));
}
document.getElementById('form2').onsubmit = function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  console.log('提交表单2', Object.fromEntries(formData));
}
document.getElementById('form3').onsubmit = function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  console.log('提交表单3', Object.fromEntries(formData));
}

// 绑定全局提交按钮的点击事件
document.getElementById('submitAll').addEventListener('click', function() {
  // 选中所有表单，依次触发submit事件
  document.querySelectorAll('form').forEach(form => {
    form.dispatchEvent(new Event('submit'));
  })
})
</script>

组件化框架（React/Vue等）实现思路 #

如果你用的是组件化开发，父组件管理多个子表单组件，实现逻辑更简洁：

1. 给每个子表单组件绑定ref，或者提前把每个子表单的submit方法收集到父组件的数组里
2. 点击父组件的提交按钮时，遍历ref数组/方法数组，依次调用每个子表单的提交方法即可

注意事项 #

• 如果需要提交顺序可控，可以把每个表单的提交逻辑写成async异步函数，遍历调用时用await等待上一个表单提交完成再执行下一个
• 如果需要所有表单校验通过才统一提交，可以先遍历所有表单执行校验逻辑，全部校验通过后再触发提交动作
• 建议单独处理每个表单的提交异常，避免单个表单提交失败中断其他表单的提交流程

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