问题:
modal关闭后form表单内数据未进行回收。导致组件再次打开后仍是关闭前的内容。
处理方法:
const [createModalVisible, handleCreateModalVisible] = useState<boolean>(false);
const layouts = {
labelCol: { span: 4 },
wrapperCol: { span: 16 },
};
<StepsForm
stepsProps={{
size: 'small',
}}
stepsFormRender={(dom, submitter) => {
return (
<Modal
width={1000}
bodyStyle={{
padding: '32px 40px 48px',
}}
keyboard={false}
maskClosable={false}
destroyOnClose={true}
title="新建规则"
footer={submitter}
open={createModalVisible}
onCancel={() => {
handleCreateModalVisible(false);
}}
>
{dom}
</Modal>
);
}}
onFinish={async () => {
message.success('提交成功');
}}
>
<StepsForm.StepForm
preserve={false}
{...layouts}
size="large"
layout="horizontal"
title="基本信息"
>
{...}
</StepsForm.StepForm>
<StepsForm>
Modal需设置destroyOnClose={true}
子组件form设置preserve={false}
Antd_Pro同样适用。