点击按钮后，打开模态框，对模态框中的表单进行封装，在验证表单数据时，需要拿到封装的表单组件中的数据，这时候使用forwardRef很方便

初始状态

父组件 Userlist

export default function UserList() {
  const [isAddVisible, setIsAddVisible] = useState(false);
  const openModel = () => {
    setIsAddVisible(true);
  }
  const onCancel = () => {
    setIsAddVisible(false);
  }
  return (
    <div>
      <Button type="primary" onClick={() => openModel()}>Primary Button</Button>
      <Modal
        visible={isAddVisible}
        title="添加用户"
        okText="确定"
        cancelText="取消"
        onCancel={onCancel}
        onOk={() => {
           //进行表单验证
        }}
      >
        <UserForm/>
      </Modal>
    </div>

  )
}

表单组件UserForm

export default Function UserForm() {
    return (
        <Form
            ref={ref}
            layout="vertical"

        >
            <Form.Item
                name="usename"
                label="用户名"
                rules={[{ required: true, message: 'Please input the title of collection!' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                name="password"
                label="密码"
                rules={[{ required: true, message: 'Please input the title of collection!' }]}
            >
                <Input />
            </Form.Item>
        </Form>
    )
})

forwardRef的使用

父组件 Userlist

const addForm = useRef();

<UserForm ref={addForm}/>

表单组件UserForm

修改导出格式

//引入forwardRef
import React, { forwardRef, useState } from 'react'

//第二个参数ref接收父组件传入的ref
const UserForm = forwardRef((props, ref) => {
    xxxxx
})
export default UserForm

Form绑定ref

<Form
    ref={ref}
    layout="vertical"
>
    xxxx
</Form>

点击确定按钮打印一下

<Modal
    visible={isAddVisible}
    title="添加用户"
    okText="确定"
    cancelText="取消"
    onCancel={onCancel}
    onOk={() => {
      console.log(addForm);
      //进行表单验证
    }}
  >
    <UserForm ref={addForm}/>
</Modal>

然后调用validateFields()方法验证数据即可

onOk={() => {
  console.log(addForm);
  //进行表单验证
  addForm.current.validateFields().then(value => {
    console.log(value);
  })
}}

最后调用接口传出数据即可