关于react的resetFields使用

最新推荐文章于 2024-06-28 16:39:50 发布
最新推荐文章于 2024-06-28 16:39:50 发布
阅读量1.5w 收藏 4
点赞数
分类专栏： 前端积累 文章标签： resetFields
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alison_Z/article/details/80762652
版权

最近在写项目中为了清空modal中的值，所以用到了resetFields方法，该方法主要是对form中的值进行重置，没有默认值的情况下会被清空

但是需要注意的是若是有需要部分的值一直存在的话，要注意在清空之前进行一个保存，在清空之后在用setFieldsValue进行设置

如图注意resetFields的位置


快乐的小z
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Antd V4版本中Form resetFields无效
Always-Learning
06-01 3354
问题描述 给表单中的每一个表单项传入一个参数的时候，参数已经传进去了，但是initialValue并没有发生变化。 原因 这是因为调用resetFileds的时机不对，也就是生命周期的问题。 解决办法 在生命周期函数componentDidUpdate中添加下面的代码即可。 componentDidUpdate() { if (this.formRef.current !== null) { this.formRef.current.resetFields();
浅谈vue中resetFields()使用注意事项
11-19
this.$refs.frmAdd.resetFields();这句在使用中有些时候不会有啥问题，但有时候就会出问题，而且特别难缠，我原来这么使用就没问题啊，怎么这里就会有问题，查找各种资料总结得出： 第一种情况：放在弹框刚准备弹出的时候 第二种情况：放在弹框关闭方法@close中 发现上次报红框的地方仍然在，并未重置 最终解决方案： this.KaTeX parse error: Expected ‘}’, got ‘EOF’ at end of input: … this.refs.frmAdd.resetFields(); }); 可以放在准备开始弹出弹框时的方法中 补充知识：vu
React开发（131）:ant design学习指南之form中的resetFields
歌谣的博客
09-02 780
重置表单值
el-form中的resetFields的使用
最新发布
蓝精灵的博客
06-28 360
在实际开发中，Form表单的内置方法resetFields()，这个函数是用来重置表单项中的所有数据，这里的重置并非将字段全部置为空，而是根据开发者在页面设置的默认初始值去重置的，element-plus 官方文档中写道，resetFields：重置该表单项，将其值重置为初始值，并移除校验结果。
React Hook antd Form回显表单，form.resetFields()清除无效问题
weixin_45961018的博客
05-22 1023
可能的原因：1. 表单值没有绑定到 form 组件上；2. 使用了表单域的 initialValue 属性，此属性值不会被 resetFields 清空；3. resetFields 调用的时机不正确：表单值还没有被重新赋值就调用 resetFields。
resetFields()重置表单至初始值方法不生效
weixin_43177685的博客
05-19 2050
问题描述：antd + rc-form中使用resetFields()重置表单至初始值方法不生效？ 问题分析：查找好多资料，后来发现是form表单没有关联起来 form表单没有关联起来，可以在组件定义的时候，通过下面代码将form表单关联起来 //form表单关联 const [form] = Form.useForm(); .... // 返回React中Form组件 return ( <Form form={form}> ......
react的基本用法
小罗伯特
10-03 446
react中一切都是以对象来表示的 1.先npm install react react-dom 两个 2.在js中导入两个包 import React from 'react' import ReactDOM from 'react-dom' 3.通过调用React.createElement()创建虚拟dom元素 至少要有三个参数 参数1：创建的元素的类型，字符串，表示元素的名称 参数2：是一个对象或null，表示 当前这个DOM元素的属性 参数3：子节点（包括 其他 虚拟DOM 获取文本子节点）
react中使用antd的表单重置数据
zoepriselife316的博客
08-19 9947
resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会重置为initialValue 使用： //这个事件，可以是click可以是生命周期函数，具体看需求 componentWillUnmount() { this.props.for...
antd v4版本From表单使用resetFields重置表单数据
qq_15905635的博客
02-16 5369
一、给From表单一个ref属性标识 <Form ref={this.formRef}></Form> 二、创建form表单实例 formRef = React.createRef() 三、在需要重置表单数据的地方调用resetFields方法 this.formRef.current.resetFields()
ElementUI中的resetFields方法
weixin_44689966的博客
05-11 5415
需求 点击按钮弹出修改的对话框 出现的bug 在点开一个按钮之后，不做操作，关闭对话框，再点开另一个按钮，发现这一行的数据被改变了 具体如下 造成的原因 原因一：我在给弹出的对话框中赋值时，是浅拷贝，导致对话框中的数据源与table中的数据源是同一个数据源，修改对话框中的数据就是修改table中的数据 原因二：resetFields仅仅是将字段重置为初始值，并不是将数据清除。上图中第一次绑定的数据是1，所以表单的初始数据就是1，在第二次点击又关闭时，会触发resetFields方法，将对话框中的数据重置为
React之字符串形式的ref
wanggang182007的博客
04-18 371
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title>1_字符串形式的ref</title> </head> <body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 核心库 --> ...
Vue-element 的 resetFields();
qqqgg的专栏
06-25 4万+
 在使用中，发现 this.$refs['activityForm'].resetFields();经常不好使，放在简单页面中可以使用，一旦复杂就坑多多！我的form在一个dialogue 中，界面上有2个按钮，一个是添加，一个是修改。界面加载之后，点击添加，再点修改没问题。先点修改，会把要修改的数据加载到弹出的对话框上。但是这个界面上的值竟然被记住了！再点击添加框，this.$refs['act...
resetFields方法重置表单
weixin_44090040的博客
07-24 2万+
<!-- * @Descripttion: resetFields方法重置表单 * @version: * @Author: zhangfan * @email: 2207044692@qq.com * @Date: 2020-07-03 09:10:28 * @LastEditors: zhangfan * @LastEditTime: 2020-07-24 14:49:07 --> <template> <div class="tableBox.
vue3 antd项目实战——Form表单的重置【使用resetFields()重置form表单数据、清空输入框】
XSL_HR的博客
12-31 1万+
ant design vue组件库中的form表单有一个自带的重置函数——resetFields()。本期文章将借助resetFields函数，实现form表单的重置与清空。
element-ui 表单重置函数resetFields();使用注意事项
热门推荐
zhongmei121的专栏
07-04 5万+
在表单重置的时候我们习惯使用this.$refs[formName].resetFields();来重置表单，但有时候会出现重置不完全的情况，例如： 表单绑定的变量： formData:{ id:null, name:null , age:null} 表单html： <el-form ref="form" :model="formData" label-width="80px" si...
关于resetFields重置表单至初始状态的问题
Mr_Yixiansen的博客
02-27 551
resetFields()方法在官网上的定义是：对整个表单进行重置，将所有字段值重置为初始值并移除校验效果。初始值也就是表单第一次绑定的值。浅拷贝给初始值赋值，给的内存地址，导致一个改变，另一个也会跟随变化。resetFields()方法执行时，form表单中的值变成了初始值，导致表单里的数据也变成了初始值，所以才会点哪一行都会变成第一次点击那行的数据。第一次点击了表格某一行的修改后，再点取消， 再点其他行，再点取消， 在表格中第二次及以后点的行会被污染成第一次点的行数据。造成这样的情况，深浅拷贝的问题。
表单重置函数resetFields()；使用注意事项
weixin_53763847的博客
10-19 843
Elementui 重置功能的书写，请大家参考
Element UI 表单resetFields()，form表单没办重置的原因及解决方法
学而时习之，不亦说乎。
04-23 1229
场景 1、用dialog【新增】、【修改】数据 2、先点击了【修改】，弹出弹窗，此时弹窗的form表单已经赋值 3、再点击新增按钮，此时调用resetFields()方法是没有办法使form清空的 原因： resetFields是将form表单重置到初始值，而这个初始值是form表单mounted后的值，也就是点击了【修改】时赋的值。 解决方法： dialog的form表单清空，this.formData = this.$options.data().call(this).formData //弹窗表
react中resetFields的用法
08-23
在React中，`resetFields`是一个方法，通常用于表单重置或清除表单字段的值。这个方法通常是与表单库（如Ant Design等）一起使用的。 具体使用方法取决于你所使用的表单库，但一般情况下，你可以按照以下步骤来使用`resetFields`： 1. 首先，确保你已经使用表单库创建了一个表单组件，并且定义了需要重置的字段。 2. 在需要重置表单的地方，获取到表单实例或引用。 3. 使用获取到的表单实例或引用调用`resetFields`方法，以重置表单字段的值。 下面是一个使用Ant Design库中Form组件的示例代码： ```jsx import { Form, Button } from 'antd'; const MyForm = () => { const [form] = Form.useForm(); const handleReset = () => { form.resetFields(); }; return ( <Form form={form}> {/* 表单字段... */} <Button onClick={handleReset}>重置</Button> </Form> ); }; ``` 在上面的示例中，我们通过`Form.useForm()`来获取表单实例，并将其赋值给`form`变量。然后，在点击重置按钮时，我们调用`form.resetFields()`来重置表单字段的值。 请注意，具体的使用方法可能因为使用的表单库而有所不同。因此，在实际使用中，请参考你所使用的表单库的文档或示例代码来了解`resetFields`方法的正确用法。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值