在antd4.0中Form使用initialValue操作


Posted in Javascript onNovember 02, 2020

悲伤

一开始一直以为initialValue是个好东西,这样我每次编辑的时候把数据传过来就行,后来发现不得行!给大家看看

在antd4.0中Form使用initialValue操作

就离谱,后面认真看了一下文档才知道这个玩意是默认值,第一次有了之后就一直是这个。

然后我在网上看用resetFields()这个方法,每次提交或者取消之后重置一下数据,然而我试了还是不得行,会变成每次点击显示的是上一次的数据,所以后面还是老老实实看了一下form的其他方法。

贴个图

在antd4.0中Form使用initialValue操作

解决

放弃initialValue

const [form] = useForm()

form.setFielsValue(currentItem)

用form带的设置数据方法。这样能够保证每次都是最新的。

随手一贴

也没啥上下文,就将就着看写法就行!!

const { visible, onEdit, onCancel, type, currentItem, ...modalProps } = props;
 const [form] = useForm()
 useEffect(() => {
 form.setFieldsValue({ ...currentItem });
 }, [visible])

 const onOk = () => {
 form.validateFields().then((values: any) => {
 onEdit(values)
 })
 }

补充知识:antd Form表单initialValue设置无效的问题之一

在表格数据中,编辑数据时用到的表单需要使用initialValue 来设置初始值,

以下写法会导致initialValue设置无效。

当表单组件被<></> ,< div></ div> 等包裹时,initialValue设置无效

// initialValue 设置无效的写法
<Form.Item label="xxx">
 {getFieldDecorator('xxx',{
 initialValue:'default'
})(
 <>
 <Input />
 <span>....</span>
 </>
) 
 }
</Form.Item>

// 正确的写法
<Form.Item label="xxx">
 {getFieldDecorator('xxx',{
 initialValue:'default'
})(
 <Input />
) 
 }
 // <span></span>
</Form.Item>

以上这篇在antd4.0中Form使用initialValue操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
setAttribute 与 class冲突解决
Feb 17 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
layui表格设计以及数据初始化详解
Oct 26 Javascript
探索node之事件循环的实现
Oct 30 Javascript
vue+iview使用树形控件的具体使用
Nov 02 #Javascript
在antd Form表单中select设置初始值操作
Nov 02 #Javascript
react+antd 递归实现树状目录操作
Nov 02 #Javascript
antd form表单数据回显操作
Nov 02 #Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 #Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 #Javascript
JavaScript实现刮刮乐效果
Nov 01 #Javascript
You might like
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
PHP写的资源下载防盗链类分享
2014/05/12 PHP
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
详解用python实现简单的遗传算法
2018/01/02 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
家长给幼儿园的表扬信
2014/01/09 职场文书
简历自我评价模版
2014/01/31 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
经典爱情感言
2015/08/03 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
Python基础之数据类型知识汇总
2021/05/18 Python