如何从Ant Design (antd) 中获取并正确使用FormInstance？

在Ant Design (antd) 的 Form 组件中，`FormInstance` 提供了对表单状态管理和生命周期处理的强大功能。要从 Antd 中获取 `FormInstance` 并正确使用它，你可以按照以下步骤操作：

1. **创建表单**: 首先，你需要在组件中导入 `Form` 和 `FormContext`。这通常是在组件的顶级部分：

import { Form, FormProvider } from 'antd';

2. **提供上下文**: 将 `Form` 包裹在 `FormProvider` 组件内，以便在组件树中传递 `Form` 实例。

<FormProvider form={yourForm}>
  {/* 在这里放置你的其他组件 */}
</FormProvider>

这里的 `yourForm` 是一个实例化的 `Form` 对象，通常通过 `create` 函数创建。

3. **注入 FormState**: 使用 `useForm` Hook 在需要使用 FormState 或生命周期方法的组件中，可以访问到 FormInstance:

import { useForm } from 'antd';

function YourComponent() {
  const form = useForm();

  // 使用 FormInstance
  const { getFieldValue, setFieldsValue, validateFieldsAndScroll, resetFields } = form;

  // 示例用法
  const handleSubmit = (e) => {
    e.preventDefault();
    validateFieldsAndScroll().then((err) => {
      if (!err) {
        console.log('提交成功');
      }
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单元素... */}
    </form>
  );
}

4. **注意事项**:
- 不要在非受控组件上直接修改 Form 的值，而是通过 `getFieldDecorator` 和 `setFieldsValue` 进行操作。
- 了解和管理好 Form 的生命周期方法，如 `onSubmit`, `onChange`, `validateFields`, 等。