【坑】antd3升级4 Modal设置destroyOnClose不生效

最新推荐文章于 2024-04-27 14:59:16 发布
最新推荐文章于 2024-04-27 14:59:16 发布
阅读量2.8k 收藏 2
点赞数 1
分类专栏： and 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bob_Yan623/article/details/126160191
版权

antd3升级4 遇到的坑--- destroyOnClose不生效问题

最近项目在重构 顺便把antd组件库升级一下 虽然antd有指定的自动升级指令 但是坑还是有点多的

只有Modal中有Form组件才会遇到这样的问题
在这里插入图片描述

但是由于3升4 Form组件是兼容包引入的 Form设置preserve={false}并没有生效，所以导致Modal弹窗关闭之后重新打开 Form的内容并不会重置。

解决方法:

  1. 可以在打开弹窗的事件或者关闭弹窗的事件 加个form.resetFields()重置一下
  2. 也可以在Modal组件前加个三目
！visible ? null : <Modal visible={visible} {...props}/>
冬天爱吃烤肉
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在antd Form表单中select设置初始值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <Form.Item label=作用对象> {getFieldDecorator('targetId', { initialValue: this.state.targetId }, { rules: [{ required: false, message: '作用对象' }] })( <Select placeholder=请选择作用对象> {targetList.map(entity => <Option key={enti
【踩坑】Antd中Modal与Form同时使用时，destroyOnClose无效的问题
a2944938071的博客
11-09 9410
问题描述： 在Modal内使用Form组件管理状态时，关闭Modal并不会清除表单的数据，即使配置了destroyOnClose属性也不生效。 原因： 简而言之，Modal的destroyOnClose属性只有在状态完全是在Modal内管理的情况下才会生效 解决方案： 方案一： 在响应事件中添加form.resetFields()，借助Form组件的API清空状态 方案二： 在Form中设置preserve属性为false，然后在Modal中设置destroyOnClose属性为true .
el-dialog 的各种正确使用姿势 以及 el-dialog destroy-on-close 无效的解决办法
唐唐唐行的博客
09-29 9606
el-dialog 的各种正确使用姿势 以及 el-dialog destroy-on-close 无效的解决办法
Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，同时使用destroy-on-close，导致关闭 dialog 时浏览器卡死问题
weixin_47541876的博客
06-07 1161
Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，同时使用destroy-on-close，导致关闭 dialog 时浏览器卡死问题
解决el-drawer关闭之后组件内数据没有完全销毁
C422805的博客
09-01 1285
关闭抽屉组件,数据没有被销毁???
el-dialog弹窗表单使用 destroy-on-close 无效（不能将数据和验证情况）的bug解决
учёба
05-29 2096
在使用el-dialog时，需要将弹窗里面的表单内容及校验规则清空，查询了element-ui发现了方法不能将数据等清空。
antd vue 使用 modal 关闭后销毁组件
buling吖的博客
11-23 7208
问题： 使用 antd vue modal 时，弹框内部是一个table，table里面有 checkbox，checkbox 的 disable 属性取决于子组件，因此每次的 disable 属性值是不一样的。antd table 根据 getCheckboxProps API 来设置 checkbox 属性，但是只有第一次能设置属性，之后都不可以。 原因： modal 组件关闭之后，并没有销毁组件，一直保持这一开始的 checkbox 属性，导致后面再次打开 modal ，checkbox 的属性没有相
Modal.confirm不能应用ConfigProvider的prefixCls解决方法
sunzhen15896的博客
08-19 883
Modal调用方法没有全局样式的解决方法
antd组件使用技巧
weixin_43924896的博客
01-16 1308
且用且珍惜。。。 Drawer destroyOnClose 关闭时销毁 Drawer 里的子元素。 所以只能销毁dom对应的数据。 有一次项目需要，用getFieldDecorator注册了一个值，不对应dom元素。 结果在drawer关闭的时候，这个变量的值并不会清空。其他有对应dom的值会清空。 ...
codemod-v4:用于antd v4升级的codemod cli
05-07
English |蚂蚁设计v4 Codemod 一组可帮助使用升级antd v4的codemod脚本。（受启发）用法在运行codemod脚本之前，最好确保首先提交本地git更改。 # global installationnpm i -g @ant-design/codemod-v4# or for yarn...
vue3-antd-admin.rar
10-25
最新vue3框架+typeScript+antdDesignUI框架管理系统模板项目
sunflower:a通过支付宝行业技术处理antd4和antd3的处理组件
05-07
支持antd4，antd3 antd组件之间的关系使用react-hook表示，而process组件用于简化开发 流程组件是从实际业务流程中提取并立即使用的 为什么 通常，我们使用antd的多个组件来完成一个过程。 例如，如果要完成“在...
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
getFieldDecorator没有第三个参数，如果写了3个参数就会出错 错误代码： <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ required: true, message: '请输入用户名', ...
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 492
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
2024 XYCTF Web 方向 wp 全解
最新发布
qq_39947980的博客
04-27 949
XYCTF 2024 Web 方向全解
两个前端标签
ma_no_lo的博客
04-24 159
两个前端标签
docker部署前端项目（二）遇到的问题
weixin_45379180的博客
04-25 386
原因： 安装docker的时候使用的是 yum -y install docker 命令，这个命令安装的是老版本。报错四：conflicts with file from package docker-common。因为使用 sudo yum install docker （下载到的是旧版）missing signature key 缺少秘钥。yum remove docker 删除docker。1、docker版本号 只有1.13.1。解决：可能是docker 未启用。
vue报错：Do not mutate vuex store state outside mutation handlers.
weixin_44021888的博客
04-25 315
vue报错：Do not mutate vuex store state outside mutation handlers.
antd Modal组件如何设置一个固定的高度
06-08
在antd Modal组件中，可以通过设置`style`属性或者`className`属性来设置固定的高度。具体的做法如下： 1. 使用`style`属性设置固定高度 ```jsx import { Modal } from 'antd'; <Modal title="Basic Modal" visible={true} style={{ height: '500px' }} // 设置固定高度为500px > <p>Some contents...</p> <p>Some contents...</p> <p>Some contents...</p> </Modal> ``` 2. 使用`className`属性设置固定高度 ```jsx import { Modal } from 'antd'; <Modal title="Basic Modal" visible={true} className="custom-modal" // 设置自定义class > <p>Some contents...</p> <p>Some contents...</p> <p>Some contents...</p> </Modal> // 在CSS中设置.custom-modal的高度为500px .custom-modal { height: 500px; } ``` 通过以上两种方式，可以很方便地设置antd Modal组件的固定高度。需要注意的是，设置固定高度可能会导致内容溢出，因此需要对内容进行适当的处理，以确保用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值