在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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 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
php查询相似度最高的字符串的方法
2015/03/12 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
jquery.validate使用攻略 第三部
2010/07/01 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
python的exec、eval使用分析
2017/12/11 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
详解Python中的文件操作
2021/01/14 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
深圳茁壮笔试题
2015/05/28 面试题
公司合作协议书范本
2014/04/18 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python