Antd form表单的使用、设值、取值、清空值方式
更新时间：2023年04月22日 08:52:23 作者：追影的React开发者
这篇文章主要介绍了Antd form表单的使用、设值、取值、清空值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Antd form表单的使用、设值、取值、清空值
1、使用
{this.props.form.getFieldDecorator("key",{})(<Input />)}3、设值
this.props.form.setFieldsValue({
key: '123',
});2、取值
this.props.form.validateFields((err, values) => {
if (!err) {
console.log("表单信息", values);
}
});3、清空值
this.props.form.resetFields();
antd中的form表单用法笔记
这是我的表单结构,引用的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设置验证规则
提交的时候就会触发
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue3项目中集成Video.js库,可以创建强大的视频播放功能,这篇文章主要介绍了如何在Vue3中使用视频库Video.js实现视频播放功能,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
这篇文章主要介绍了使用vue框架 Ajax获取数据列表并用BootStrap显示出来,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了vue、react等单页面项目应该这样子部署到服务器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
这篇文章主要给大家介绍了关于如何使用Vue父子组件通信实现todolist的功能的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-04-04
本篇文章主要介绍了Vue2 配置 Axios api 接口调用文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
本文主要介绍了vue el-pagination分页查询封装的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了vue的虚拟DOM使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
今天小编就为大家分享一篇浅谈在vue中使用mint-ui swipe遇到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Tailwind CSS是一个流行的前端CSS框架,它基于原子设计原则,提供了一套预构建的CSS样式类,旨在帮助开发者快速地创建响应式、可定制的用户界面,本文给大家介绍了Vue2中使用tailwindCss的详细教程,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了Vue2与Vue3中Ref绑定元素方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论