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

项目场景:

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

问题描述

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

解决方案:

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

我大概写一下代码思路:

const changeNumber=(data,fieldname)=>{
//先更新onChange时表单的数据data
this.props.form.setFieldsValue({[fieldname]:data});
//然后再获取表单的所有数据值,这时获取的值就是最新的值,就可以做任何数据处理了。
let form_value=this.props.form.getFieldsValue();
}
<Form>
	<Form.Item>
		{
			getFieldDecorator('addnew1',
			{
			rules:[
				required:true,
				message:'请输入数据'
			],
			initialValue:0
			})
		(<InputNumber onChange={(data)=>changeNumber(data,'addnew1')}>)}
		
	</Form.Item>
	<Form.Item>
		{
			getFieldDecorator('addnew2',
			{
			rules:[
				required:true,
				message:'请输入数据'
			],
			initialValue:0
			})
		(<InputNumber  onChange={(data)=>changeNumber(data,'addnew2')}>)}
		
	</Form.Item>
</Form>
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值