码磊姐姐
雄关漫道真如铁,而今迈步从头越。

项目场景:

我想用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>
<div>
  <span>你在。。。</span>
</div>
posted on 2023-09-01 16:29  码磊姐姐  阅读(428)  评论(0编辑  收藏  举报