关于antd弹出框内的From表单数据不清空的问题

最新推荐文章于 2024-05-21 23:21:19 发布
最新推荐文章于 2024-05-21 23:21:19 发布
阅读量857 收藏 1
点赞数 2
文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59749798/article/details/126252023
版权

关于这个问题我也曾尝试过很多种方法，甚至把form表单的属性看完了，依旧没有什么比较好的选择，当然，也可以在this.setState({属性名:''}),这样强制为空，不过总感觉效率低下，代码复杂且麻烦，最后我在antd的modal弹出框里找到了较好的解决方法，一键搞定，也不需要定义啥的

一般我们在写添加或者修改等操作的时候，再次打开弹出框就会发现里面的内容还是打开上一个弹出框的内容，在这里直接用这个属性就好!!

希望对你有所帮助

前端练习kun
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应 发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动添加字段名校验, 终于, 错误的原因浮现出来了 from.validateFields([n
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
antd中，Modal 和Form一起使用时，Form表单清空
qq_37233023的博客
09-27 8306
第一种：<Modal />默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置destroyOnClose。 <Modal />和 Form 一起配合使用时，设置destroyOnClose也不会在 Modal 关闭时销毁表单字段数据，需要设置<Form preserve={false} /> 参考链接:https://ant.design/components/modal-cn/ 第二种：如果用hooks，可以在useEf...
【轻松解决el-dialog关闭后数据缓存 没清空】
weixin_43690623的博客
10-26 7973
在使用el-dialog的时候，关闭弹窗之后，发现数据还是保存在上面，查资料试了那些方法，都不太行，最后琢磨出来这个最简单的方法，泪目。
react使用antd-design动态渲染组件，封装通用modal弹出form表单组件、table组件(传数据出页面)
刘毅鹏的博客
07-31 8535
react使用antd-design封装通用modal弹出form表单组件、table组件并附带1.upload上传图片转base64、2.批量插入excel表格数据 页面展示效果 第一步项目中创建CommonForm.js文件对antd-design中Form组件封装 import { Image, Form, Input, Button, Radio, Select, TimePicker, Checkbox, Upload, message } from "antd"; import Re
vue3.0+Ant Design Vue后台crm管理系统admin
03-06
使用了Vue3.0全家桶、ant-design-vue2.0，实践vue3.0的新特性以及玩法，vue3.0的Composition API相比于vue2.0的Options API 灵活很多，让我们可以灵活地组合组件逻辑,目前后端admin大部分还是vue2.6;但是未来被vue3取代是大势所趋,望早上岸!
element dialog 关闭 form 表单校验未清除的解决办法
qq_40860137的博客
06-27 9931
①开发背景:新增XX功能 点击之后 弹出的是el-form表单组成的dialog, 表单新增判空规则, 提交时表单项不合格, 会报错 如下图所示, 只有当表单项合格, this.$refs[formName].validate(asyncvalid=>{}) 中的valid才为true, ②在这种报错前提下, 我们关闭再打开dialog, 会发现报错信息还在。第一种办法(不可行), 在按钮点击的时候调用 this.$refs['accountForm'].resetFields(...
vue3 antd项目实战——Form表单的重置【使用resetFields()重置form表单数据、清空输入框】
热门推荐
XSL_HR的博客
12-31 1万+
ant design vue组件库中的form表单有一个自带的重置函数——resetFields()。本期文章将借助resetFields函数，实现form表单的重置与清空。
vue3+antd3 解决modal包着form表单关闭后表单输入框数据没有被清空
weixin_52625246的博客
07-27 2350
vue3+antd3 解决modal包着form表单关闭后表单输入框数据没有被清空
antd form表单数据回显操作
01-22
index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, ...
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
方法一： getFieldDecorator没有第三个参数，如果写了3个参数就会出错 错误代码： <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ ...Input placeholder='\u8bf7\u8f93\u...
vue解决浏览器中跳转新页面缓存上一页表单等内容方法
qq_35946021的博客
06-06 5567
在工作中，有可能会遇到需要缓存页面或组件的功能。：比如在h5中有个一个50个表单，在填到第40个表单时，需要你去另一个新页面去选择列表项，然后把数据带回来。需要我们不仅把数据带回来还要保留前面已经填好的40个表单内容不被重置。此功能在微信小程序是可以做到的，微信小程序返回上一页内容的话，onshow以前的生命周期的不会调用的，所以表单是会被保留的。但是vue生命周期和微信小程序不一样。如果跳转某个页面或返回上一页都是不被缓存的。我们可以使用 keepAlive 来缓存当前页面或组件。
VUE 表单点击编辑，再点击添加，数据无法清空问题（新增和修改用一个弹窗）
前路漫漫，少年，继续披荆斩棘！
02-22 484
VUE 表单点击编辑，再点击添加，数据无法清空问题（新增和修改用一个弹窗）
el-dialog关闭后表单数据缓存没清空【已解决】
Astronaut224的博客
11-03 3277
系统中有新增和修改两个功能，共用一个对话框。要求新增时对话框内容为空，修改时内容默认填充旧数据。遇到的问题是，点击新增后内容填充了，关闭对话框再点击新增或者其他条目的修改，对话框内还是第一次打开的旧数据，没有清空。我遇到的这个问题，是误解了 resetFields 函数的功能。注意这个函数是将表单重置为初始值，要确定好初始值是啥。参考博客：https://blog.csdn.net/m0_67400973/article/details/123352141。
el-dialog关闭后清空form表单(resetFields()方法不生效的原因及解决方法)
wangjie的博客
10-25 3742
form表单属性resetFields不生效问题解决，el-dialog清空form内容，重置组件。
antdv的日期选择框赋值后不能清除也不能选择别的时间的处理
weixin_52921391的博客
03-21 2864
最近在用到日期选择框遇到一个小问题 应用场景是这样的：新增和修改时一个form，一个弹出框。新增时候把日期选择框的年月日时分秒传给后端；修改时请求接口把年月日时分秒的值变成moment的值赋值给日期选择框（因为日期选择框只能是moment格式）。然后发现直接赋值会报警告，只能是moment的格式，换成moment的值复制发现选择日期选择框的值能拿到，但是页面没有变化也不能删除（this.$set解决，下面有注释，往下翻） 下面是解决办法 组件部分 <!--新增和编辑的弹出框--> &
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 476
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
antd的模态框，模态框点击取消后，表单数据清空
06-06
当antd的Modal组件点击取消后，表单数据清空可以通过以下两种方式实现： 1. 使用Form组件和Form.resetFields()方法 如果你的表单组件使用了antd的Form组件，那么你可以在Modal组件的onCancel回调中调用Form.resetFields()方法来清空表单数据。例如： ```jsx const [visible, setVisible] = useState(false); const [form] = Form.useForm(); const handleCancel = () => { form.resetFields(); // 清空表单数据 setVisible(false); // 隐藏模态框 }; return ( <div> <Button onClick={() => setVisible(true)}>打开模态框</Button> <Modal visible={visible} onCancel={handleCancel}> <Form form={form}> {/* 表单项 */} </Form> </Modal> </div> ); ``` 在上面的代码中，我们使用了Form.useForm()来获取一个表单实例，然后在Modal组件的onCancel回调中调用了form.resetFields()方法来清空表单数据。 2. 使用React状态和setState()方法 如果你的表单组件没有使用antd的Form组件，那么你可以在Modal组件的onCancel回调中使用React的状态和setState()方法来清空表单数据。例如： ```jsx const [visible, setVisible] = useState(false); const [formData, setFormData] = useState({}); const handleCancel = () => { setFormData({}); // 清空表单数据 setVisible(false); // 隐藏模态框 }; const handleInputChange = (event) => { const { name, value } = event.target; setFormData({ ...formData, [name]: value }); // 更新表单数据 }; return ( <div> <Button onClick={() => setVisible(true)}>打开模态框</Button> <Modal visible={visible} onCancel={handleCancel}> <Input name="input1" value={formData.input1} onChange={handleInputChange} /> <Input name="input2" value={formData.input2} onChange={handleInputChange} /> </Modal> </div> ); ``` 在上面的代码中，我们使用了React的useState()方法来定义了一个名为formData的状态，它的初始值为空对象。然后在Modal组件的onCancel回调中调用了setFormData({})方法来清空表单数据。在表单项的onChange回调中，我们使用setFormData()方法来更新表单数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值