antd中的form表单 initialValue导致数据不更新问题
初步理解 : initialValue就是所谓的defaultValue,只会在第一次赋值的时候改变,却又有一些不同,因为 initialValue又会因其他改动而改变。 然而当获取的数据重新上来要渲染的时候 ,initialValue的值却又不改变,所以 让人觉得很是捉摸不透。
解决:````this.props.form.resetFields();```
例:如果第一步操作执行的是修改操作,一些默认值填充上去,如果不作处理,第二部执行新增操作的时候,会把第一个默认的值带着,导致新增弹框弹出来的时候form表单中就是数值,效果体验特别不好,
后面发现在Modal文件里面添加componentWillReceiveProps中处理报表重置,就可以刷新form表单
componentWillReceiveProps(nextProps) {
if (!nextProps.modal.modalUpdateDetail) {
this.props.form.resetFields();
}
后来还是会在同样的坑里面跳 但这回不是在Modal里的Form,而是在类似TAB组件切换数据的时候,this.state的内容变了,但是render的initialValue还是保留着原来的数据 解决方法 1 我第一想到的是强制刷新,window.location.reload() 但这样的办法并不是理想的效果
2 治根还得治本,我知道是initialValue的问题 但如果参考原来的在componentWillReceiveProps里面重置表单数据,会出现其他各种问题,因为```componentWillReceiveProps``这个函数你可能因为别的原因触发了
componentWillReceiveProps(nextProps) {
if (!nextProps.modal.modalUpdateDetail) {
this.props.form.resetFields();
}
后来想着,既然是因为initialValue已经有了初始化,那在切换操作的时候,将它清除掉好了,所以在离开的操作函数里添加 了 this.props.form.resetFields();
作者:sbwxffnhc
链接:https://juejin.im/post/5c67e01651882562a12ad79b
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
antd中的form表单 initialValue导致数据不更新问题的更多相关文章
- Javascript中的Form表单知识点总结
Javascript中的Form表单知识点总结 在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement ...
- django中的 form 表单操作
form组件 1. 能做什么事? 1. 能生成HTML代码 input框 2. 可以校验数据 3. 保留输入的数据 4. 有错误的提示 1. 定义 from django ...
- 非form表单提交的数据就要用@requestbody注解获取http传过来的值,尤其json
非form表单提交的数据就要用@requestbody注解获取http传过来的值,尤其json
- Django中的Form表单
Django中已经定义好了form类,可以很容易的使用Django生成一个表单. 一.利用Django生成一个表单: 1.在应用下创建一个forms文件,用于存放form表单.然后在forms中实例华 ...
- 小程序 <web-view></web-view> 中使用 form 表单提交
在最近的小程序项目中,使用到了 <web-view></web-view> 内嵌 H5 页面,在 H5 中需要使用 form 表单提交数据. H5 使用的技术框架是 vue+v ...
- Django中的Form表单验证
回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错 ...
- Django 中的Form表单认证
一.Form表单 1.1 Form的几个功能 验证用户数据(显示错误信息) 初始化页面显示内容 HTML Form提交保留上次提交数据 生成HTML标签 1.2 创建表单类Form 1. 创建 ...
- 第83天:jQuery中操作form表单
操作form表单 1. 属性操作 设置属性: // 第一个参数表示:要设置的属性名称 // 第二个参数表示:该属性名称对应的值 $(selector).attr(“title”, “传智播客”); 获 ...
- javaWeb 中前端Form表单数据处理(手动拼json)
在前端我们会用到最多的就是form表单提交数据,在form表单中有很多都是自动将数据传到后台,然后通过实体来接受的,但是有的时候我们就是需要在前端就拿到这个Form表单的数据,这是我们就可以自己讲数据 ...
随机推荐
- 【Python】CV2的一些基本操作
·导入: import cv2 ·读取图片: img = cv2.imread('路径') 使用函数cv2.imread(filepath,flags)读入一副图片 filepath:要读入图片的完整 ...
- 学Java,Java书籍的最佳阅读顺序
疫情以来,好久没出差了,今天出差去趟上海,早上 4 点多就起床了,到机场天都没亮.到登机口离起飞还一小时,趁着等飞机的时间,抓紧码字,把这篇文章收个尾. 今天和大家说说学 Java 的读书路线.路线中 ...
- HTTP隧道解决的问题
转自别人的文章:https://blog.csdn.net/gogzf/article/details/78385506 客户端通常会用 Web 代理服务器代表它们来访问 Web 服务器.比如,很多公 ...
- 资源相关视图(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 这里就扯到资源了,资源是啥意思?如果是教科书,怕又是有一个名词解释要背吧,吼吼--其实这个资源在这里的意思基本上猜就能猜到 ...
- 小迪安全 Web安全 基础入门 第七天 - 资产泄漏、CMS识别、Git监控、SVN、DS_Store、备份
一.CMS指纹识别源码获取方式 1.网站特有文件.如/templets/default/style/dedecms.css-dedecms. 2.网站独有文件的MD5.如favicon.ico但是该文 ...
- AT2686 [ARC080A] 4-adjacent 题解
Content 给定一个长度为 \(n\) 的数列 \(a\),请将其重新排列,使得 \(\forall i\in[1,n-1]\),都有 \(4\mid (a_i\cdot a_{i+1})\),或 ...
- SpringBoot基础篇(一)
1.前言 什么是SpringBoot:springboot是当下一套流行的J2EE框架.借助微服务的思想.将业务分成一个个的服务.通过spring-cloud进行整合.最后通过spring-data进 ...
- xcode使用spdlog(1.7)总结
!!版权声明:本文为博主原创文章,版权归原文作者和博客园共有,谢绝任何形式的 转载!! 作者:mohist 注意️ 请选择对c++11支持完善的编译器, 因为spdlog一直更新. 本文演示环境: m ...
- 【LeetCode】947. Most Stones Removed with Same Row or Column 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 并查集 日期 题目地址:https://leetco ...
- 【剑指Offer】丑数 解题报告
[剑指Offer]丑数 解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-interviews 题目描述: ...