React中如何通过单个按钮同时提交收货地址和账单地址两个表单

你的单按钮提交两个表单的思路完全可行，不需要放弃该思路，只需要调整现有逻辑即可，以下是具体可落地的实现方式：

你当前写法的问题 #

你使用的是React Bootstrap的Form组件，默认type="submit"的按钮只会触发它所属的最近一层Form的提交事件，你现在把按钮放在两个独立Form的外层，默认无法触发两个表单的提交校验，需要针对性调整逻辑。

可选实现方案 #

方案1：状态提升到父组件统一管理（最推荐） #

• 将收货地址、账单地址的所有表单状态都放到公共父组件中维护
• 两个地址表单组件改造为受控组件，只负责UI渲染，接收父组件传递的字段值、onChange回调
• 点击父组件的提交按钮时，直接在父组件中统一校验两个表单的所有字段，校验通过后拼接所有数据调用提交接口即可

父组件示例结构：

// 父组件
const AddressPage = () => {
  // 收货地址状态
  const [shippingData, setShippingData] = useState({})
  // 账单地址状态
  const [billingData, setBillingData] = useState({})

  const handleSubmit = () => {
    // 自行实现两个表单的校验逻辑
    const isShippingValid = validateShipping(shippingData)
    const isBillingValid = validateBilling(billingData)
    if(isShippingValid && isBillingValid) {
      // 拼接数据提交接口
      api.submitAddress({shipping: shippingData, billing: billingData})
    }
  }

  return (
    <div>
      <ShippingAddress data={shippingData} onChange={setShippingData} />
      <BillingAddress data={billingData} onChange={setBillingData} />
      <Button onClick={handleSubmit}>提交</Button>
    </div>
  )
}

方案2：用ref调用子组件的提交方法 #

如果不想改动现有子组件的状态管理逻辑，可以用ref实现：

• 给ShippingAddress、BillingAddress组件分别绑定ref
• 子组件内部暴露校验、获取表单数据的公共方法
• 父组件点击提交按钮时，依次调用两个子组件的校验方法，全部校验通过后收集两个表单的数据统一提交

方案3：合并为单个Form组件 #

如果两个表单拆分只是为了视觉区分，没有特殊的独立提交需求，可以直接把两个表单的内容放到同一个Form标签内，用字段前缀区分两类地址（比如shipping_fullname、billing_fullname），直接用原生表单提交逻辑即可，实现更简单。

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