react一键提交两个表单

Question

我正在使用 React JS 开发网络应用程序。它有一个页面，由两种形式组成 Shipping Address 和 Billing Address。现在我想通过一个按钮提交这两个表单。

<Form style={{ width: '300px' }}>
    <Form.Group controlId="fullname">
          <Form.Control
            style={InputStyle}
            required
            type="text"
            placeholder="Full Name *"
            value={fullname ? fullname : ""}
            onChange={(e) => setField('fullname', e.target.value) }
          ></Form.Control>
        </Form.Group>
    <Form.Group controlId="address">
        <Form.Control
        style={InputStyle}
        required
        type="text"
        placeholder="Address *"
        value={address ? address : ""}
        onChange={(e) => setAddress(e.target.value)}
        ></Form.Control>
    </Form.Group>
    <Form.Group as={Col}  controlId="formGridZip">
      {/* <Form.Label>Zip</Form.Label> */}
      <Form.Control 
      required
      type="numeric"
      style={InputStyle} 
      value={postalCode ? postalCode : ""}
      placeholder="Postal Code *"
      onChange={(e) => setPostalCode(e.target.value)}
      />
    </Form.Group>
    <Form.Group as={Col}  md="4"controlId="Mobile">
      <Form.Control 
      required
      type="numeric"
      style={InputStyle} 
      value={mobile ? mobile : ""}
      placeholder="Mobile Number *"
      onChange={(e) => setMobile(e.target.value)}
      />
    </Form.Group>
</Form>

上面一个是送货地址，账单地址与此类似。

一个页面导入这两个表单，一键提交真的可行吗？或者我应该使用这种方法。

<div>
  <Shipping Address />
  <Billing Address />
  <Button type="submit" />
</div>

Answer 1

好吧，如果您在同一个请求中发送这两个表单，那么您可以在父组件中创建一个表单对象，然后将表单对象传递给子表单并绑定它。然后仅提交 post 对象中的数据。

如果这些表单需要提交到不同的 URL，那么您可以将一个函数作为 prop 传递给子组件，然后在单击提交按钮时从父组件调用该函数。

如果情况与我上面提到的不同，请告诉我。

Answer 2

您可以将由父组件维护的状态变量（类似于 submitForm）作为 prop 传递给两个表单组件。在表单组件的 componentDidUpdate 方法中，观察 submitForm 属性值的变化，如果是 true，则调用相应的表单提交操作。

最初，在父组件中 submitForm 的值将是 false，然后在 submit 按钮的 onClick 事件上您的父组件，将 submitForm 的值更改为 true。 componentDidUpdate 表单组件的方法会注意到 prop 更新，并按照您的预期调用提交操作。

如果我不够清楚请告诉我，我会添加一些代码片段。

react一键提交两个表单

Submit two forms with one button in react

html

javascript

reactjs

react-bootstrap