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

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