react ant-design 使用form 与抽屉组件，解决每次点击展开抽屉，form数据不更新问题

最新推荐文章于 2026-06-16 12:40:40 发布
原创 最新推荐文章于 2026-06-16 12:40:40 发布 · 2.9k 阅读 · 3 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
在表格编辑功能里，抽屉组件使用form表单设置默认数据时，点击展示数据，form表单数据无法改变。解决办法是设置抽屉属性destroyOnClose=true，关闭抽屉时自动销毁form表单组件，下次打开读取传入的默认数据，实现表单数据更新。

在做一些表格编辑的功能时候，在抽屉组件里面使用form表单的时候会设置默认form数据 ，例如

     

  //默认初始化数据
  const formInitVal = {
    polceName: data.polceName,
    type: data.type,
    status: data.status,
    trialDeviceSerial: data.trialDeviceSerial,
  };

 当我们在点击展示每条数据的时候，会发现传入了当前数据，form表单数据却无法改变，这种情况要设置抽屉的属性 destroyOnClose=true,在我们关闭抽屉的时候自动销毁form表单组件，下次再次打开就会读取我们传入的data默认数据，这样就达到了，每次点击更新抽屉里面的form表单数据

destroyOnClose	关闭时销毁 Drawer 里的子元素	boolean	false

react使用antd表单（Form）放在弹窗（Modal）里，resetFields失效，关闭弹窗后再次打开，表单的值还是上一次，如何解决？
AngkorWhat的博客
07-06 1718
【ant.design】react使用antd表单（Form）放在弹窗（Modal）里，resetFields失效，关闭弹窗后再次打开，表单的值还是上一次，如何解决？
React Hooks打开抽屉组件useState以及setState方法打开抽屉组件
liuye066的专栏
05-26 1275
1。在类组件中打开抽屉组件的方法： 使用state来设置显示与否。setState来改变状态 import { Drawer, Button } from 'antd'; import React from 'react' class DrawerDemo extends React.Component { state = {visible:false} showDrawer = () => { this.setState({ visib
Antd 中Modal和Form配合时验证器无效和默认值不更新问题
MFine的博客
10-24 2566
Antd 中Modal和Form配合时验证器无效和默认值不更新问题 验证器无效问题 发现过程 在跟着B站React实战课程走的时候，因为课程是Antd V3我使用的是V4。所以在遇到Modal中嵌套From时，课程使用的是高阶组件的方式实现验证器。我看见V4直接有rules(包括使用validator)属性，直接设置后发现无效。 解决方法 其实在官方文档有Modal组件配合的实例。 import React, { useState } from 'react'; import { Button, Modal
【React+antd】打开列表中不同Drawer，展示数据不变化
all_might1的博客
12-20 2418
如果不想看具体使用情况，我把解决方案写在最开头 方案一：设置key值，new Date().getTime() 方案二：添加 destroyOnClose 属性 目录 一、问题描述 二、解决方案 方法一：设置key值 方法二：destroyOnClose 属性 一、问题描述 表格table中每条数据有编辑操作，点击编辑按钮，右侧会弹出抽屉让用户进行编辑 是 antd 中 Table + Drawer + Form 以前...
vue2使用ant design 的drawer组件显示不了抽屉内容与collapse组件需要点击两次才展开的问题
weixin_46687032的博客
05-18 4298
由于ant官方文档用的是ts和vue3写的，所以用vue2可能会有问题实现不了(也有可能是官方文档的问题，这文档真的很难看懂，需要去搜索其他文章才能够实现，这里记录下我的踩坑记录) Drawer 抽屉组件 Ant 官方文档-Drawer组件 原先我是用了第一个例子（基本用法，如下图） 但是，显示不了抽屉内容，按f12发现drawer的内容并不在dom中，最后参考了这篇文章成功显示出来了。主要就是v-model:visible改成:visible；@after-visible-change也没反应，改成.
element ui table 滚动条_Ant Design 3.20.5 发布，企业级 UI 设计语言
weixin_29115107的博客
12-01 121
Ant Design 3.20.5 发布了，更新内容如下：修复 样式问题。#17743前一天发布的 3.20.4 版本更新内容包括：修复多层级 Drawer 的 mask 为 false 时，卸载子级组件后父抽屉不收回的问题。#17698修复 Table 圆角样式在 Firefox 下丢失的问题。#17641修复 Menu 抛出 Cannot update during an existing ...
HIUI组件库深度解析：70+个React组件的完整功能介绍
gitblog_01127的博客
06-07 1025
HIUI组件库是一个面向中后台系统的前端解决方案，提供了超过70个高质量的React组件，帮助开发者快速构建交互一致、界面美观的企业级应用。作为小米生态下的开源项目，HIUI专注于中后台产品的交互与视觉设计，覆盖了大多数中后台系统的需求。 ## 📦 HIUI组件库的核心特性 HIUI组件库的设计理念是**开箱即用**和**业务导向**，它不仅仅是简单的UI组件集合，而是针对企业级应用场景深度
Cypress与Semi Design端到端测试：架构设计与生产级实践
最新发布
weixin_33984032的博客
06-16 395
前端自动化测试是保障Web应用质量的关键环节，其核心在于模拟真实用户操作，验证应用功能的正确性与稳定性。在技术原理上，现代测试框架通过直接控制浏览器、监听网络请求和DOM变化，实现了更精准的交互模拟和更快的反馈循环。对于采用Semi Design这类复杂组件库的项目，传统的录制回放式测试往往因选择器脆弱、异步等待难以把控而失效，其技术价值在于构建一套可维护、高稳定性的测试基础设施，从而提升团队交付效率与信心。在实际应用场景中，这通常涉及分层架构设计、自定义命令封装、以及针对特定组件库的交互策略优化。本文聚焦
从零开始，搭建一个简单的购物平台（六）
00后|互联网💻|办公室🍵茶农，希望通过技术改变生活|爱折腾💪|收集各类📚网络资源，好物不私藏，点点关注，不迷路。 全网搜：阿宇的编程之旅 or 阿宇的宝库
04-12 1180
从零开始，搭建一个简单的购物平台（五）：https://blog.csdn.net/time_____/article/details/105437534项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping 在第四篇文章中实现了服务端的文件上传以及添加用户的后端功能，并进行了测试，这篇文章主要实现前端上传头像和添加用...
解决 Ant Design Vue 抽屉第一次打开没有数据，第二次打开才有数据
qq_58671311的博客
10-09 1421
解决 Ant Design Vue 抽屉第一次打开没有数据，第二次打开才有数据
antDesign Drawer
weixin_42424269的博客
03-12 9882
1.一个drawer其实就是一个Drawer控件当中又包含了一个组件 就像下面这样 <Drawer title={drawerTitle} placement="right" closable onClose={this.onCloseDrawer} visible={drawerVisibl...
ant-design在 vue 抽屉（drawer）里面嵌套弹出框（modal）出现蒙层遮挡弹框问题
热门推荐
MingT 明天你好！的博客
07-26 1万+
ant-design在 vue 抽屉（drawer）里面嵌套弹出框（dialog）出现蒙层遮挡弹框问题
使用react+antd3开发的复杂、超大数据量级的form表单
weixin_57185351的博客
02-28 2773
本方案肯定不是最佳实践，从产品层面到代码层面都有优化的空间。因为当时在需求评审时，由于疏忽，没有和pm确认该页面的数据量级，以至于在提测之后才知道该页面需要承载的压力之大，所以各方均没有时间再做大量的改造，只能从现有的代码上尽力做下优化。一个嵌套了多个子层级，每一个层级均具有动态增、删、上移、下移、复制功能的form表单，且该表单也支持回显编辑再提交。面对这种大数据量的表单功能，开发时应该注意：1.细化form表单结构；2.细化数据；3.增加判断或使用hooks，减少不必要的重复渲染。
react框架结合antd使用 抽屉组件
qq_42329594的博客
12-19 7731
1.首先要引入antd中的组件 import $ from 'jquery' import React from 'react' import {BrowserRouter,Router,Link,} from "react-router-dom" import { List,Switch,Drawer,NavBar,Icon,WhiteSpace,Picker,DatePicker} fro...
2021-07-16
m0_48164934的博客
07-16 545
项目场景： React + Antd + webpack的后台管理项目 问题描述： 在项目中，用到antd里面的Drawer组件，组件内容涵盖图片信息，每次点击大图放大或缩小，关闭抽屉后页面会卡顿。 最开始以为是Image组件的问题，再详细看完官方文档后，发现是Drawer组件的问题，Drawer组件的api中有这样一个参数destroyOnClose,作用为：关闭时销毁 Drawer 里的子元素，默认是false，需设置为true。 原因分析： 正如官方文档所说，关闭抽屉是需...
【react的antd框架 Drawer抽屉不显示】
weixin_48578764的博客
09-21 2077
rantd中Drawer不显示
AntD的 Drawer 和 Modal 关闭后页面无法销毁的问题
xiadahai的博客
07-19 4600
AntD的 Drawer 和 Modal 关闭后页面无法销毁的问题
DrawerLayout抽屉更新MainActivity的viewpager
a791404623的博客
10-09 454
前言在学校课余时间做一个小的APP，配合老师实验室的那个控制系统，想做的美观一些，APP实现后界面如下： 默认来说，Mainactivity里面应该是一个ViewPager，但是这个遇到了一个问题，在侧栏抽屉选中更新的时候，ViewPager内容更改，Adapter更换或者直接更换ViewPager，但是不管是哪种情况Viewpager都不更新！！！后来走投无路，更换了策略才解决了这个问题在原
antd中的表单的使用
copyer_xyf的博客
08-29 2777
每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer） 前言 ​ 在开发项目中，经常使用表单模块，来完成交互的过程。但是我感觉，在以前开发的过程中，就是直接copy，没有仔细的去理解其中的逻辑，只要现象满足就可以。但是最近项目中想封装一个通用的表单组件，还是必要知道其中的逻辑和各个属性。所以，就回头过来仔细的理一下。 使用 在antd4中，使用form表单，有着三种不同的方式的写法。 普通用法 （所以的布局全在表单中） hooks写法 .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值