本文详细介绍了在Ant Design的Form组件中如何实现数据收集、编辑及表单验证。通过给Form添加ref属性，可以利用getFieldsValue获取表单值，setFieldsValue用于设置表单字段的值，方便编辑场景。validateFields则用于提交时执行表单验证，每个Form.Item可通过rules设定验证规则。此外，还展示了如何在编辑模式下预填充数据。
这是我的表单结构,引用的antd中的Form表单,里面有四个From.Item
(这里的Row,Col可以忽略,因为我包个外层结构好布局样式)
我的需求
1.在此处点击添加是需要收集到这个skuId ,以这个skuId为参数去调用接口,去匹配拿到到一组数据,展示到下面的表格中. 收集某个From.Item中的数据用到的方法getFieldsValue,
拿值怎么拿,需要把From定义成一个可控组件,也就是给它加一个ref,通过标签获取它上面的值,看代码
这两步就可以给标签添加一个ref,名字为formRef
再通过ref调用Form身上的方法,这里这个setFieldsValue('对应的字段名字'),就可以拿到对应的值
2.同样的setFieldsValue('字段名')可以设置它的值,
比如,你点的编辑按钮进入的页面,进来需要重新编辑这些数据,就可以用到这个方法
3.最后就是表单提交使用validateFields()的方法
每个From.Item里面可以通过rules设置验证规则
提交的时候就会触发
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
