解决 AntdPro 中 ModalForm 表单重置问题

需求是我们点击弹窗确定之后，第二次再次点击弹窗表单数据清除。

Modal

先看看 antd 中的 Modal 是如何配置的

API

参数	说明	类型	默认值	版本
destroyOnClose	关闭时销毁 Modal 里的子元素	boolean	false

destroyOnClose 使用方法

<Modal
  title="添加用户"
  visible={isModalVisible}
  onCancel={() => isShowModal(false)}
  footer={null}
  destroyOnClose={true}></Modal>

可以看到在 Modal 中直接给destroyOnClose={true}就可以清除元素里边的东西。

ModalForm

ModalForm 组合了 Modal 和 ProForm 可以减少繁琐的状态管理。
先来看官方文档https://procomponents.ant.design/components/modal-form/#api

官方文档的方法是通过formRef手动重置，但是我们想要的是点击确定之后，第二次再次点击弹窗表单数据清除。

API

参数	说明	类型	默认值
trigger	用于触发 Modal 打开的 dom，一般是 button	ReactNode	-
visible	是否打开	boolean	-
onVisibleChange	visible 改变时触发	(visible:boolean)=>void	-
modalProps	Modal 的 props，使用方式与 antd
相同。注意：不支持 ‘visible’，请使用全局的 visible	props	-
title	弹框的标题	ReactNode	-
width	弹框的宽度	Number	-
onFinish	提交数据时触发，如果返回一个 true。会关掉抽屉,如果配置了 destroyOnClose 还会重置表单。	async (values)=>boolean	-
submitter	提交按钮相关配置，使用方式与ProForm
相同。	ProForm	-

Antdpro 中的 ModalForm 是集合 Modal 和 ProForm 了其中 onFinish 有一个 destroyOnClose 属性需要配置才会重置表单，但是在 MadalForm 中没有明确说明
在程序中找到 ModalForm 一层一层的找进去
第一层：有基本常用的属性。但是有一个 modalProps 在点进去看

import type { ModalProps, FormProps } from 'antd'
import type { CommonFormProps } from '../../BaseForm'
export declare type ModalFormProps<T = Record<string, any>> = Omit<
  FormProps<T>,
  'onFinish' | 'title'
> &
  CommonFormProps<T> & {
    /**
     * 接受返回一个boolean，返回 true 会关掉这个弹窗
     *
     * @name 表单结束后调用
     */
    onFinish?: (formData: T) => Promise<boolean | void>
    /** @name 用于触发抽屉打开的 dom */
    trigger?: JSX.Element
    /** @name 受控的打开关闭 */
    visible?: ModalProps['visible']
    /** @name 打开关闭的事件 */
    onVisibleChange?: (visible: boolean) => void
    /**
     * 不支持 'visible'，请使用全局的 visible
     *
     * @name 弹框的属性
     */
    modalProps?: Omit<ModalProps, 'visible'>
    /** @name 弹框的标题 */
    title?: ModalProps['title']
    /** @name 弹框的宽度 */
    width?: ModalProps['width']
  }
declare function ModalForm<T = Record<string, any>>({
  children,
  trigger,
  onVisibleChange,
  modalProps,
  onFinish,
  title,
  width,
  ...rest
}: ModalFormProps<T>): JSX.Element
export default ModalForm

第二层： ModalProps 内部有所有属性，其中有destroyOnClose?: boolean;

export interface ModalProps {
  destroyOnClose?: boolean
}

所以我们找到了destroyOnClose的使用方法

destroyOnClose 使用方法

<ModalForm
  title="添加佣金"
  width="400px"
  visible={createModalVisible}
  onVisibleChange={handleModalVisible}
  modalProps={{
    destroyOnClose: true,
  }}
  onFinish={async value => {
    console.log(value)
  }}></ModalForm>