项目场景:
我想用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