React父组件调用（触发）表单子组件实例或方法

一. 需求：最近在做项目的时候遇到这样一个需求。表单页可重复使用，即把表单页单独写为公共组件，但是在调用该子组件的父组件需要触发表单子组件的保存数据和校验提交表单数据的方法，表单子组件采用的是React高阶form组件构成，而子组件暴露方法给调用父组件需要使用useImperativeHandle，这是需要React.forwardRef进行Ref的传递，以方便父组件获取实例触发方法。这个时候问题就出来了，当导出此组件时使用了高阶函数createForm封装，再怎么使用React.forwardRef封装呢？研究后发现这种情况封装是有顺序的，需要先使用createForm封装，然后再使用React.forwardRef封装一次。

二. 表单子组件代码实例（使用React高阶表单组件rc-form）：

import React, { useImperativeHandle} from 'react';
import { createForm, formShape } from 'rc-form';
import { InputItem, List } from 'antd-mobile';
const Item = List.Item;


interface IProps {
  form?: formShape;
  refInstance?: any;
}

const FormComponent = (props: IProps) => {
  const { form, form: { getFieldProps }, refInstance } = props;
  /* 暴露子组件保存数据方法给父组件 */
  useImperativeHandle(refInstance, () => ({
    toSubmitData: () => {
      onSubmit();
    }
  }));

  /* 提交表单数据 */
  const onSubmit = async () => {
    form.validateFields((error: any, fieldsValue: any) => {
        if (error) {
            // 提交数据
        }
  })}

  return (
    <div className={styles.normal}>
      <form>
         <InputItem
          clear
          maxLength={20}
          {...getFieldProps('userName', {
            rules: [{
              required: true,
              message: '请输入姓名',
            }, {
              pattern: new RegExp('^([\u4e00-\u9fa5\\s]{1,20}|[a-zA-Z\\·\\s]{1,20})$'),
              message: '姓名格式不正确，请输入20个以内的中英文字符,英文名称不允许输入·以外的特殊字符',
            }],
          })}
          placeholder="请输入姓名"
          moneyKeyboardAlign="right"
        >姓名</InputItem>
      </form>
    </div>
  );
};

const Component = createForm()(FormComponent);
export default React.forwardRef((props: IProps, ref: any) => <Component {...props} refInstance={ref} />);

三. 父组件调用代码实例（使用React高阶表单组件rc-form）：

import React, { useRef, FunctionComponent } from 'react';
import EditFormComponent from './component/FormComponent';

interface IRef extends React.RefObject<HTMLDivElement> {
  toSubmitData: () => void;
}

interface IProps {

}

const Component: FunctionComponent<IProps> = (props) => {
  const formRef = useRef<IRef>(null);

  /* 点击提交数据 */
  const toSubmitData= () => {
    formRef?.current?.toSubmitData();
  };

  retutn (
    <div onClock={() => { toSubmitData(); }}>
      <EditFormComponent ref={formRef} />
    <div/>
  );
};

export default Component;

四. 当表单组件使用AntDesign中的Form组件时，遇到这样的问题依然可以使用这个思路解决问题。