最近antd发布了4.0版本，里面做了一些变化，特别是form组件部分。

比如说，之前我们在Modal的组件中使用Form 。原来的做法是Modal和From写在一个组件中，但是4.0版本中，我们看到文档上有这段文字。

为何在 Modal 中调用 form 控制台会报错？#

Warning: Instance created by useForm is not connect to any Form element. Forget to pass form prop?

这是因为你在调用 form 方法时，Modal 还未初始化导致 form 没有关联任何 Form 组件。你可以通过给 Modal 设置 forceRender 将其预渲染

所以，我们需要在父组件中写Modal，子组件中使用Form。由于antd的Modal的确定和取消按钮都是Modal组件的，所以，我们需要在父组件中调用子组件的提交方法。

父组件

const Tag = (props)=>{
  const [loading,setLoading] = useState(false);
  const [rows,setRows] = useState([]);
  const [modalVisible,setModalVisible] = useState(false);
  const [editId,setEditId] = useState(null);
  const formRef = useRef();
  
  const handleShowModal = (editId)=>{
    setModalVisible(true);
    setEditId(editId);
  };

  const handleCloseModal = ()=>{
    setModalVisible(false);
    setEditId(null);
  };

  const handleDelete=(record)=>{
    Modal.confirm({
      title: '确定删除?',
      content: '删除标签',
      onOk() {
      },
      onCancel() {

      },
    });
  };

  const handleModalOK = ()=>{
    formRef.current.submit();
  };


  const columns = [{
    title: '名称',
    dataIndex: 'tagName',
    key: 'tagName',
  },{
    title: '操作',
    key:'id',
    width: 200,
    render: (text, record) => (
        <span>
            <a onClick={()=>handleShowModal(record.id)}>编辑</a>
            <Divider type="vertical"/>
            <a onClick={()=>handleDelete(record)}>删除</a>
        </span>
    )
  }];

  const titleEl = <div>
    <Button type={`primary`} onClick={()=>handleShowModal(null)} >新增标签</Button>
  </div>;

  return (<>
    <Table rowKey={`id`} title={()=>titleEl} columns={columns} dataSource={rows} loading={loading} pagination={false} />
    <Modal forceRender visible={modalVisible} title={(editId?`修改`:`新增`)} onOk={handleModalOK} onCancel={handleModalCancel}>
      <TagForm ref={formRef} editId={editId} />
    </Modal>
  </>)
};
export default Tag

子组件

import { Form, Input } from 'antd';
import React, {forwardRef, useEffect, useImperativeHandle} from 'react';

const TagForm = ({visible, editId, onCancel, onSuccess},tagFormRef)=>{

  const  [form]  = Form.useForm();
  const {getFieldDecorator, validateFields, resetFields, setFieldsValue} = form;

  useImperativeHandle(tagFormRef,()=>({

    submit:()=>{
      console.log("ss")
    }

  }));

  return <>
      <Form form={form} >
        <Form.Item label={`标签名称`} name={'tagName'}>
          <Input/>
        </Form.Item>
      </Form>
  </>

};
export default forwardRef(TagForm)