antd 之 Form 表单踩坑记

同一个 Form 下的两个 Form.list,如何在第二个Form.list中使用第一个Form.list的添加的所有数据?

首先,要明确:

  • Form.list 和 Form.item 都没有 onChange 事件。
  • Form 里不能嵌套使用 Form。

Form.provider 提供了两个并级 Form 之间共享数据的途径。所以我用了它,但是在Form.provider的onFormChange事件中:Form.provider 仅仅提供第一层的name及其对应的value,也就是Form.list的name和value,取不到更深一层的Form.item的name和value。

抛开Form.provider,现在这两个Form已经是父子组件关系了,那就用父子组件传值试试。问题是:Form.provider的onFormChange事件覆盖了Form的onChange事件,也就是说Form的onChange事件失效了,那我如何实时获取当前Form的数据呢?

遂弃用Form.provider。

此时,Form的onChange事件有效了,实时获取当前Form的数据,然后传值到父组件,在父组件中使用子组件的数据,遍历渲染,可也。

什么时候需要加name?

需要提交的数据,就必须加上name。该name作为提交的数据的key。

官网直达:https://ant.design/components/form-cn/

猜你喜欢

转载自blog.csdn.net/mChales_Liu/article/details/113629272