antd表单onChange阶段未更新
分类:javascript
最近在做问卷管理功能,遇到一个问题,在这里记录一下~
1. 需求
一个可编辑表格用来录入选择题选项内容,如下图,当是单选题的时候,“是否答案”这一列只能选择一个,多选题的时候可以选择多个
2. 遇到的问题
最初的思路:用 onChange 函数监测 Checkbox 是否被选中,如果被选中则将其它的 Checkbox setFieldsValue为未选中状态,可是在handleAnswerFlagChange函数中发现
① 通过 e.target.value 的值是滞后的,当我打上勾时,获取到的e.target.value是 ‘N’,并不是最新的值。
② 通过antd 获取表单值的方法 getFieldValue(key) 获取到的值也是滞后的。
3. 原因
这里直接上 antd 的源码
从上面的源码可以看出设置最新值 setFields 是在onChange之后,也就是说,在onChange中取到的值是上一次的值,并未更新,同时,如果在onChange中使用form.setFieldsValue()这样的方法最后会被onCollect中的setFields方法重新覆盖而无效。
4. 解决方法
① 使用 setTimeout 用来获取最新的值
② 使用官方提供的 normalize 将字段值转换给控件
该函数默认有三个参数 value, prevValue, prevValues,需返回该控件的值
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu