antd表单onChange阶段未更新

吐槽君 分类:javascript

最近在做问卷管理功能,遇到一个问题,在这里记录一下~

1. 需求

一个可编辑表格用来录入选择题选项内容,如下图,当是单选题的时候,“是否答案”这一列只能选择一个,多选题的时候可以选择多个

image.png

2. 遇到的问题

最初的思路:用 onChange 函数监测 Checkbox 是否被选中,如果被选中则将其它的 Checkbox setFieldsValue为未选中状态,可是在handleAnswerFlagChange函数中发现

① 通过 e.target.value 的值是滞后的,当我打上勾时,获取到的e.target.value是 ‘N’,并不是最新的值。

② 通过antd 获取表单值的方法 getFieldValue(key) 获取到的值也是滞后的。

image.png

3. 原因

这里直接上 antd 的源码

image.png

image.png

从上面的源码可以看出设置最新值 setFields 是在onChange之后,也就是说,在onChange中取到的值是上一次的值,并未更新,同时,如果在onChange中使用form.setFieldsValue()这样的方法最后会被onCollect中的setFields方法重新覆盖而无效。

4. 解决方法

① 使用 setTimeout 用来获取最新的值

image.png
② 使用官方提供的 normalize 将字段值转换给控件

该函数默认有三个参数 value, prevValue, prevValues,需返回该控件的值

image.png

一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容