react - 操作DOM同时提交多表单

原创

于 2019-08-07 17:36:45 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #ant design pro

这篇博客详细介绍了如何在React中创建并使用多个表单组件，以及如何实现统一的表单提交功能。首先，展示了如何分别创建第一个和第二个表单组件。接着，讲解了在render方法中如何嵌入和展示这两个表单。最后，重点在于如何实现一个功能，让多个表单能够同时提交，这对于处理复杂表单场景非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 创建表单组件

第一个表单组件

const CaseBaseInfoForm = Form.create()(props => {
  const {
    form,
  } = props;

  return (
    <Form ref={caseBaseInfo}>
      ...
    </Form>
  );
});

第二个表单组件

const ApplicantForm= Form.create()(props => {
  const {
    form,
  } = props;

  return (
    <Form ref={applicant}>
      ...
    </Form>
  );
});

2. 在 render() 中使用表单组件

使用第一个表单组件

<CaseBaseInfoForm
    {...caseBaseInfoFormData} // 引入表单传值以及函数
    ref={ref => {
     	this.caseBaseInfo = ref;
     }}
 />

使用第二个表单组件

<ApplicantForm
    {...applicantFormData}  // 引入表单传值以及函数
    ref={ref => {
        this.applicant = ref;
    }}
 />

3. 统一提交表单

handleSubmit = e => {

    e.preventDefault();
    
     this.caseBaseInfo.validateFields

最低0.47元/天解锁文章

200万优质内容无限畅学