首页 > 其他分享 >解决antd Form的onChange方法改变的值与getFieldsValue获取的值不同步的问题

解决antd Form的onChange方法改变的值与getFieldsValue获取的值不同步的问题

时间:2023-09-01 16:34:01浏览次数:37  
标签:Form form getFieldsValue 表单 获取 antd onChange data

项目场景:

我想用antd写一个动态添加表单的Input框的功能,并且自动计算Input中的值,所以需要实时获取表单的数据。

问题描述
在onChange时使用form.getFieldsValue()方法获取的表单值是上次改变的值,与当前onChange改变的值不一致。这个时候我就在网上找解决方法。有的说可以在onChange时使用setTimeOut,但是我试了,不好用。有一个方法很好用,我分享一下。

解决方案:
在onChange时可以先把表单字段对应的值更新,这里使用form.setFieldsValue(‘字段名’)方法更新
更新完之后,再使用getFieldsValue方法获取值,就是最新的值了。

 1 const changeNumber=(data,fieldname)=>{
 2 //先更新onChange时表单的数据data
 3 this.props.form.setFieldsValue({[fieldname]:data});
 4 //然后再获取表单的所有数据值,这时获取的值就是最新的值,就可以做任何数据处理了。
 5 let form_value=this.props.form.getFieldsValue();
 6 }
 7 <Form>
 8     <Form.Item>
 9         {
10             getFieldDecorator('addnew1',
11             {
12             rules:[
13                 required:true,
14                 message:'请输入数据'
15             ],
16             initialValue:0
17             })
18         (<InputNumber onChange={(data)=>changeNumber(data,'addnew1')}>)}
19         
20     </Form.Item>
21     <Form.Item>
22         {
23             getFieldDecorator('addnew2',
24             {
25             rules:[
26                 required:true,
27                 message:'请输入数据'
28             ],
29             initialValue:0
30             })
31         (<InputNumber  onChange={(data)=>changeNumber(data,'addnew2')}>)}
32         
33     </Form.Item>
34 </Form>

 

标签:Form,form,getFieldsValue,表单,获取,antd,onChange,data
From: https://www.cnblogs.com/maleijiejie/p/17672276.html

相关文章

  • winform,c#左链接查询两张表或多张表,数据库正常,但是发现查出来的同一条记录变成了好几
    这个样子就是犯了笛卡尔积,我有两张表那我自己项目来说一下吧:a表的内容如下: b表的内容如下: 到这里,你会发现,又五六个字段内容是一模一样的,该字段两张表都用,那么查询出来数据翻倍就很好解决了在where后面加上a.字段1=b.字段1and......anda.字段n=b.字段n就可以了......
  • JS 获取form表单的所有数据
    在HTML中用js获取通过GET、POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值。针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为公用方法直接调用。可以提高大家的开发效率。html<body><formid="login"name="login"......
  • Vue+Elemnt-UI遍历生成form-item并为其绑定校验规则
    需求:接口获取数据,动态渲染表单(文本框类型,内容,标签,是否必填)参照博主:blog.csdn.net/qq_33769914/article/details/122449601遇到的问题:1.通过对单个item绑定的校验规则不生效(表现为:不弹提示,或填了内容依旧提示)           2.提示出现后通过clearValidate()......
  • Transformer 的作用是什么?
    Transformer到来之前,包括自动驾驶、自然语言在内的整个人工智能领域都生活在一片“天下苦秦久矣”的环境中,算法模型制约着整个产业的进步。Transformer以及BETR出来以后,便开始在NLP领域一统江湖。随着这几年的发展,在各种视觉基准数据集上,VisionTransformer已经逐步替代掉了以往的C......
  • PPT主题颜色ColorFormat、ColorScheme、ColorEffect 对象在PPT中的使用
    一、ColorFormat对象代表单色对象的颜色、带有过渡或图案填充的对象的前景或背景色,或者指针的颜色。可以将颜色设为显式的红-绿-蓝值(使用RGB属性)或设为配色方案中的一种颜色(使用SchemeColor属性)。使用下表中列出的属性之一返回ColorFormat对象。使用此属性对此对象如......
  • NLP原理系列1-说清楚transformer原理
    NLP原理系列1-说清楚transformer原理来用思维导图和截图描述。思维导图的本质是变化(解决问题)->更好的,或者复杂问题拆分为小问题以及拆分的思路。 参考链接:李宏毅transformer原理。 一tansformer的推理及训练过程1tf训练过程红框部分是训练得grandtruth,......
  • clang-format配置教程
    title:"clang-format配置教程"date:2023-08-29T16:05:25+08:00tags:["clang"]categories:[]draft:false配置clang-formatQtCreator使用clang-format_利白的博客-CSDN博客Git如何将clang-formatting添加到预提交钩子|极客教程clang-format二进制文件下载:https://ll......
  • 【Azure App Service for Linux】NodeJS镜像应用启动失败,遇见 RangeError: Incorrect
    问题描述在AppServiceForLinux中,部署NodeJS应用,应用启动失败。报错信息为:2023-08-29T11:21:36.329731566ZRangeError:Incorrectlocaleinformationprovided2023-08-29T11:21:36.329776866ZatIntl.getCanonicalLocales(<anonymous>)2023-08-29T11:21:36.329783066ZatC......
  • 【Azure App Service for Linux】NodeJS镜像应用启动失败,遇见 RangeError: Incorrect
    问题描述在AppServiceForLinux中,部署NodeJS应用,应用启动失败。报错信息为:2023-08-29T11:21:36.329731566ZRangeError:Incorrectlocaleinformationprovided2023-08-29T11:21:36.329776866ZatIntl.getCanonicalLocales(<anonymous>)2023-08-29T11:21:36.3297830......
  • transformer怎么学习
    Transformer、MLP、CNN、RNN的区别在于特征的交互方式不一样~自从Transformer以及BETR出来以后,便开始在NLP领域一统江湖。随着这几年的发展,在各种视觉基准数据集上,VisionTransformer已经逐步替代掉了以往的CNN结构,并且整体架构更加简单。近期,基于Transformer的多模态大模型以及AI......