Drawer/Modal中 destroyOnClose不生效

[zczc1984]

最近在使用Drawer和Modal，发现destroyOnClose={true}（不生效），但是ListTableList中却是生效的，后来逐步摸索发现这样一个情况，不知是否是bug。

1.Drawer或者Modal中一般是包含着Form的
2.当这个Form 指定form={formInstance} (注：formInstance，通过const [formInstance]=Form.useForm()； 得到 )，就会造成Drawer或者Modal 被关闭时 destroyOnClose={true}无法正常生效，导致Input等输入的内容还保留着。

不知是否同样有人遇到过这样的情况。相关测试代码如下：

import React from 'react';
import { Drawer, Form, Input, Modal } from 'antd';

const Test = (props: any) => {
const [formInstance] = Form.useForm();

return (
<Drawer
destroyOnClose={true}
onClose={() => props.onCancel()}
title="TestForm"
visible={props.drawerVisible}
closable={true}
>
{/* Form中如果设置了form={formInstance} destroyOnClose就会失效 */}

<Form.Item label="input" name="input" initialValue="aaaa">

</Form.Item>


);
};

export default Test;

[zczc1984]

Form中包裹着 不知道为啥没了

[zczc1984]

包裹着 antd的Input组件

[huntdream]

不是destroyOnClose失效，而是formInstance属于外部的变量，你单独写一个组件就好了

[zczc1984]

怎么理解单独写一个组件，操控Form 不是都是利用Form.useForm()嘛，能给个简单例子嘛

[zczc1984]

我尝试了下，把Drawer和Form分开，包含Form的组件可以使用formInstance，然后还要实现父组件调用子组件的方法，可以保证destroyOnClose生效

[zczc1984]

改造了下原来的测试样例

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

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

//可以使用useImperativeHandle来按需暴露给父组件一些东西
//第一个参数要暴露给forwardRef中的第二个ref参数，第二个参数要暴露出什么
useImperativeHandle(ref, () => {
return {
submit,
reset,
};
});

const submit = () => {
formInstance.validateFields().then((values) => {
console.log(values);
});
};

const reset = () => {
formInstance.resetFields();
};

return (

<Form.Item label="input" name="input" initialValue="aaaa">
// Input控件

</Form.Item>

);
});

interface RefType {
submit: () => void;
reset: () => void;
}

const Test = (props: any) => {
const currentRef = useRef();

return (
<Drawer
destroyOnClose={true}
onClose={() => props.onCancel()}
title="TestForm"
visible={props.modalVisible}
closable={true}
footer={
<div
style={{
textAlign: 'right',
}}
>
<Button
onClick={() => {
currentRef.current?.submit();
}}
type="primary"
style={{ marginRight: 5 }}
>
Submit

<Button
onClick={() => {
currentRef.current?.reset();
}}
>
Reset


}
>


);
};

export default Test;

[huntdream]

我觉得这种情况可以不用Modal的footer，写一个公共的Footer给子组件就好了，useImperativeHandle每次都要写的话还是比较麻烦的

[zczc1984]

找到一段描述 Modal和Form一起使用，destroyOnClose，也不会在Modal关闭时，销毁表单Form中的字段，需要在Form中，presever={false}