ant中getFieldDecorator包装过的控件,使用validateFields后,控件数据变更后无法同步

场景描述:

table数据表单校验,使用getFieldDecorator 绑定数据时,需要initialValue属性初始化数据,但是使用validateFields校验后,会出现store数据变更,但是initialValue数据没有变更的问题

运行框架:

react+umijs+antui

先看看官方解释:

《ant中getFieldDecorator包装过的控件,使用validateFields后,控件数据变更后无法同步》

看看setFieldsValue方法的调用

《ant中getFieldDecorator包装过的控件,使用validateFields后,控件数据变更后无法同步》

setFieldsValue方法需要知道fieldName

再看看getFieldDecorator 参数

《ant中getFieldDecorator包装过的控件,使用validateFields后,控件数据变更后无法同步》

此处:getValueFromEvent、normalize可以用来监听onchange事件,获取变更的数据。所以我们,可以在getValueFromEvent、normalize方法中通过setFieldsValue方法来改变表单值

解决方法:

1、将数据存储在store中,使用resetField来同步initialValue数据
2、在控件onchange事件中,使用setFieldsValue来做数据数据同步(官方不推荐)
3、在getValueFromEvent中调用setFieldsValue来做数据数据同步(官方推荐方法)

实践场景

问题:含税金额=税额+不含税金额。不含税金额变更后,税额没有及时变更,store数据已经变更

校验前ok

《ant中getFieldDecorator包装过的控件,使用validateFields后,控件数据变更后无法同步》

校验后异常

《ant中getFieldDecorator包装过的控件,使用validateFields后,控件数据变更后无法同步》

改善后效果:

《ant中getFieldDecorator包装过的控件,使用validateFields后,控件数据变更后无法同步》

代码片段

《ant中getFieldDecorator包装过的控件,使用validateFields后,控件数据变更后无法同步》

此处,采用的方法3,注意:不调用dispatch方法,props也会同步变更

如有更好的解决方法,欢迎交流~~

    原文作者:pamki
    原文地址: https://segmentfault.com/a/1190000019844958
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞