需求：react如何在父组件中调用子组件的form？

最近在项目中，遇到一个需求。在Antd的Drawer中，有Form表单，当时我写的是把整个Form拿出去做一个组件，因为Button按钮在Form的组件中，所以需要数据可以直接拿到，再传出去就行。现在需求是在父组件中调用Form，验证表单和拿Form数据，普通的子传父好像无法满足需求。下面是我的实现代码

父组件

import {useRef} from 'react'
import MyForm from '.../...'

const ParentComponent = () => {
  const formRef = useRef();
  
  const handleFormSubmit = (values) => {
    console.log(values);
  };

// 在按钮点击事件中触发子组件中的表单验证和获取表单值
  const handleButtonClick = () => {
   //调用子组件的form
    formRef.current.form
      .validateFields()
      .then((values) => {
        handleFormSubmit(values);
      })
      .catch((error) => {
        console.error('表单验证失败:', error);
      });
  };

  return (
    <div>
      <h1>父组件</h1>
      <MyForm ref={formRef}  />
      <Button type="primary" onClick={handleButtonClick}>
        提交表单
      </Button>
    </div>
  );
};

export default ParentComponent;

子组件

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

const MyForm = forwardRef((props,ref) => {
  const [form] = Form.useForm();

  // 将表单引用传递给父组件
  useImperativeHandle(ref, () => ({
    form,
  }));
  
  //如果只需要数据，把抛出的form替换为你需要的表单数据即可。

  return (
    <Form form={form}>
      <Form.Item
        name="name"
        label="姓名"
        rules={[
          {
            required: true,
            message: '请输入姓名',
          },
        ]}
      >
        <Input />
      </Form.Item>
    </Form>
  );
});

以上代码就可以完成需求啦，应该有更好的方法，欢迎大家讨论。