526互联

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

发布时间 2023-09-01 16:32:06作者: 码磊姐姐

项目场景：

我想用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>