公司在用antd+mobx做表单时遇见一些问题,自己解决并记录下来
业务需求
- 点击新增按钮时,弹出一个嵌入Form的Modal,填写完毕后验证表单
- 点击编辑按钮时,弹出上一个Modal,并将以前的填写信息回显上去
遇见的问题
问题1、表单验证后错误信息已经打印到控制台上,但页面中并没有显示错误信息
分析过程:
- 填写表单时触发
onFieldsChange
将变化的value存放到store中 - store状态改变触发
mapPropsToFields
将store的值回显到页面中
问题原因:
store只保存了表单的value,导致store回显到页面时没有error信息,所以页面中不会显示错误信息。另外form.validateFields也会触发onFieldsChange
。
解决方法:
将errors信息也保存到store中(参考issuse)
问题2、store已经改变,但是值没有回显到页面中
当点击编辑按钮时,store中的值并没有回显到表单中,打印store的值发现其实已经存在。
原因:store的值是通过mapPropsToFields
回显的,页面没有回显可能就是mapPropsToFields
没有触发,在mapPropsToFields
console时,页面没有打印,说明mapPropsToFields
没有触发。mapPropsToFields是在组件的componentWillReceiveProps中调用的(关于表单的双向绑定),我们只需要触发组件的componentWillReceiveProps即可。
解决方法:
通过注解mobx的状态已经绑定到了组件的props上了,但是改变mobx有时并不能触发组件的componentWillReceiveProps函数。所以我直接传递一个props。
<CarConfigModal form={{formStore}}/>
上面传递到CarConfigModal中的props其实并没有实际的作用,我只是为了触发组件的componentWillReceiveProps,让mapPropsToFields
触发并回显。