当前位置:   article > 正文

react-antd中modal组件内form数据回收_antd form modal preserve

antd form modal preserve

问题:

modal关闭后form表单内数据未进行回收。导致组件再次打开后仍是关闭前的内容。

处理方法:

  1. const [createModalVisible, handleCreateModalVisible] = useState<boolean>(false);
  2. const layouts = {
  3. labelCol: { span: 4 },
  4. wrapperCol: { span: 16 },
  5. };
  6. <StepsForm
  7.     stepsProps={{
  8.     size: 'small',
  9.     }}
  10.     stepsFormRender={(dom, submitter) => {
  11.     return (
  12.     <Modal
  13.     width={1000}
  14.     bodyStyle={{
  15.     padding: '32px 40px 48px',
  16.     }}
  17.     keyboard={false}
  18.     maskClosable={false}
  19.     destroyOnClose={true}
  20.     title="新建规则"
  21.     footer={submitter}
  22.     open={createModalVisible}
  23.     onCancel={() => {
  24.     handleCreateModalVisible(false);
  25.     }}
  26.     >
  27.     {dom}
  28.     </Modal>
  29.     );
  30.     }}
  31.     onFinish={async () => {
  32.     message.success('提交成功');
  33.     }}
  34.     >
  35.     <StepsForm.StepForm
  36.         preserve={false}
  37.         {...layouts}
  38.         size="large"
  39.         layout="horizontal"
  40.         title="基本信息"   
  41.         >
  42.         {...}
  43.     </StepsForm.StepForm>
  44. <StepsForm>

Modal需设置destroyOnClose={true}

子组件form设置preserve={false}

Antd_Pro同样适用。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/115644
推荐阅读
相关标签
  

闽ICP备14008679号