react父组件获取表单子组件的数据

函数组件写法

你需要通过 forwardRef 和 useImperativeHandle 的组合使用来实现在函数组件中正确拿到 form 实例：

// 子组件
import React, { forwardRef, useImperativeHandle } from 'react';
import Form, { FormComponentProps } from 'antd/lib/form/Form';

const FCForm = forwardRef<FormComponentProps, FCFormProps>(({ form, onSubmit }, ref) => {
  useImperativeHandle(ref, () => ({
    form,
  }));
  
  `...the rest of your form`;
});
const EnhancedFCForm = Form.create<FCFormProps>()(FCForm);

使用表单组件可以写成这样：

// 父组件
import React, { createRef } from 'react';

const TestForm = () => {
  const formRef = createRef<Ref>();
   const submit =()=>{
     formRef.current!.form.validateFieldsAndScroll((err,values)=>{
       if(err) return;
       console.log(values);  // 表单数据
     })
   }
  return (
    <EnhancedFCForm
      // onSubmit={() => console.log(formRef.current!.form.getFieldValue('name'))}
      wrappedComponentRef={formRef}
    />
  );
};

类组件写法 经过 Form.create 之后如果要拿到 ref，可以使用 rc-form 提供的 wrappedComponentRef，详细内容可以查看这里。

// 子组件
class CustomizedForm extends React.Component { ... }

// use wrappedComponentRef
const EnhancedForm =  Form.create()(CustomizedForm);

// 父组件
<EnhancedForm wrappedComponentRef={(form) => this.form = form} />
  // this.form  => The instance of CustomizedForm
  submit =()=>{
     this.form.validateFieldsAndScroll((err,values)=>{
       if(err) return;
       console.log(values);  // 表单数据
     })
   }