feat(form): onFinish support reset form

packages/form/src/demos/drawer-form.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Button, message } from 'antd';
 import ProForm, {
   DrawerForm,
@@ -17,9 +17,11 @@ const waitTime = (time: number = 100) => {
 };
 
 export default () => {
+  const formRef = useRef();
   return (
     <DrawerForm
       title="新建表单"
+      formRef={formRef}
       trigger={
         <Button type="primary">
           <PlusOutlined />
@@ -29,6 +31,7 @@ export default () => {
       onFinish={async (values) => {
         await waitTime(2000);
         console.log(values);
+        console.log(formRef);
         message.success('提交成功！');
         // 不返回不会关闭弹框
         return true;

packages/form/src/form.md

@@ -233,7 +233,7 @@ ModalForm 组合了 Modal 和 ProForm 可以减少繁琐的状态管理。
 | modalProps | Modal 的 props，使用方式与 [antd](https://ant.design/components/modal-cn/) 相同，但是去掉了 current 和 onChange | [props](https://ant.design/components/modal-cn/#API) | - |
 | title | 弹框的标题 | `ReactNode` | - |
 | width | 弹框的宽度 | `Number` | - |
-| onFinish | 提交数据时触发，如果返回一个 true，会关掉弹框 | `async (values)=>boolean | void` | - |
+| onFinish | 提交数据时触发，如果返回一个 true，会关掉弹框并且重置表单 | `async (values)=>boolean | void` | - |
 
 ### DrawerForm
 
@@ -247,7 +247,7 @@ DrawerForm 组合了 Drawer 和 ProForm 可以减少繁琐的状态管理。
 | drawerProps | Modal 的 props，使用方式与 [antd](https://ant.design/components/modal-cn/) 相同，但是去掉了 current 和 onChange | [props](https://ant.design/components/modal-cn/#API) | - |
 | title | 抽屉的标题 | `ReactNode` | - |
 | width | 抽屉的宽度 | `Number` | - |
-| onFinish | 提交数据时触发，如果返回一个 true，会关掉抽屉 | `async (values)=>boolean | void` | - |
+| onFinish | 提交数据时触发，如果返回一个 true，会关掉抽屉并且重置表单 | `async (values)=>boolean | void` | - |
 
 ## Fields API
 

packages/form/src/layouts/DrawerForm/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useImperativeHandle, useRef } from 'react';
 import { Drawer } from 'antd';
-import { FormProps } from 'antd/lib/form';
+import { FormInstance, FormProps } from 'antd/lib/form';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import { DrawerProps } from 'antd/lib/drawer';
 import { Store } from 'antd/lib/form/interface';
@@ -61,11 +61,18 @@ const DrawerForm: React.FC<DrawerFormProps> = ({
     value: rest.visible,
     onChange: onVisibleChange,
   });
+  /**
+   * 同步 props 和 本地
+   */
+  const formRef = useRef<FormInstance>();
+  useImperativeHandle(rest.formRef, () => formRef.current, [formRef.current]);
+
   return (
     <>
       <BaseForm
         layout="vertical"
         {...omit(rest, ['visible'])}
+        formRef={formRef}
         submitter={{
           searchConfig: {
             submitText: '确认',
@@ -82,6 +89,7 @@ const DrawerForm: React.FC<DrawerFormProps> = ({
           }
           const success = await onFinish(values);
           if (success) {
+            formRef.current?.resetFields();
             setVisible(false);
           }
         }}

packages/form/src/layouts/ModalForm/index.tsx

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React, { useContext, useImperativeHandle, useRef } from 'react';
 import { Modal, ConfigProvider } from 'antd';
-import { FormProps } from 'antd/lib/form';
+import { FormInstance, FormProps } from 'antd/lib/form';
 import { ModalProps } from 'antd/lib/modal';
 import { Store } from 'antd/lib/form/interface';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
@@ -63,18 +63,25 @@ const ModalForm: React.FC<ModalFormProps> = ({
     onChange: onVisibleChange,
   });
   const context = useContext(ConfigProvider.ConfigContext);
+  /**
+   * 同步 props 和 本地的 ref
+   */
+  const formRef = useRef<FormInstance>();
+  useImperativeHandle(rest.formRef, () => formRef.current, [formRef.current]);
 
   return (
     <>
       <BaseForm
         layout="vertical"
         {...omit(rest, ['visible'])}
+        formRef={formRef}
         onFinish={async (values) => {
           if (!onFinish) {
             return;
           }
           const success = await onFinish(values);
           if (success) {
+            formRef.current?.resetFields();
             setVisible(false);
           }
         }}