antd 在函数组件拿到 form

函数组件中暴露 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: props.form
  }));
  return (
        <div className={ Styles.ApplyForm } style={ style }>
            <Form colon={ false }>
               <Form.Item
                   label="申请人"
                   colon={ false }
                   name="applyer"
                   { ...formItemLayout }
               >
                   { getFieldDecorator('applyer', { 
                         rules: [{ required: true, message: '请输入申请人!' }],
                         initialValue: username
                     })(<Input disabled />) }
               </Form.Item>
               <Form.Item
                   label="申请理由"
                   colon={ false }
                   name="reason"
                   { ...formItemLayout }
               >
                   { getFieldDecorator('reason', {
                       rules: [{ required: true, message: '请输入理由!' }],
                   })(<Input.TextArea rows={ 4 } />) }
               </Form.Item>
            </Form>
        </div>
    );
});
const EnhancedFCForm = Form.create<FCFormProps>()(FCForm);

外部引用该函数组件：

const TestForm = () => {
  // 这里就可以拿到函数组件内部表单的实例
  const formRef = createRef<Ref>();
  return (
    <EnhancedFCForm
      onSubmit={() => console.log(formRef.current!.form.getFieldValue('name'))}
      wrappedComponentRef={formRef}
    />
  );
};

参考antd官网

这篇好文章是转载于：学新通技术网