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

9次阅读

共计 615 个字符,预计需要花费 2 分钟才能阅读完成。

场景描述:

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

运行框架:

react+umijs+antui

先看看官方解释:

看看 setFieldsValue 方法的调用

setFieldsValue 方法需要知道 fieldName

再看看 getFieldDecorator 参数

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

解决方法:

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

实践场景

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

校验前 ok

校验后异常

改善后效果:

代码片段

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

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

正文完
 0