antd3.x中的form
时间:2022-07-23
本文章向大家介绍antd3.x中的form,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近在维护公司的中台erp系统,项目中js库用的是react,ui库用的是antd。平时还是喜欢自己写css,刚开始还是有点不太习惯直接上ui库做项目,觉得用antd还是挺恶心的,主要是form。在熟悉了以后发现这个库真棒。
react缺少类似vue的v-model
这样的双向绑定机制, 所以在做表单的时候需要手动监听keyup,input,blur
这一类的事件,会显得稍微麻烦一些。而antd中的form则出了一个类似v-model的类似方法。它不仅仅提供了双向绑定功能,而且它还具有校验,取值,赋值,重置,数据搜集,提交功能。antd官网
双向绑定:getFieldDecorator
用法:该方法用在表单的子域里面,通过this.props.form.getFieldDecorator(id, options)进行使用,其中id为输入控件的唯一标志,而options为一些基本的数据规则配置等等,详情查看
常见用法
<Form.Item label="Note">
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Please input your note!' }],
})(<Input />)}
</Form.Item>
虽然有双向绑定,但是在某些时候,也会用到设置值与获取值的方法,则会使用到setFieldsValue,getFieldsValue,getFieldValue。
注意
:要使用这些api,一定要把对应的 field 用 getFieldDecorator 进行注册。
设置值:setFieldsValue
通过setFieldsValue对其他控件进行赋值。
常见用法
this.props.form.setFieldsValue({
username: 'kyle',
});
取值: getFieldsValue,getFieldValue
通过getFieldsValue对一组数据进行取值,getFieldValue对单个数据进行取值。
用法
获取全部数据
this.props.getFieldsValue()
获取filed为username的数据
this.props.getFieldValue('username')
校验:validateFields
校验方法会校验在双向绑定getFieldDecorator中定义必填项required为true的所有字段
form.validateFields((err,value) => {
if(!err){
return; // 这里是通过校验的执行,未通过的则会在对应表单进行提示
}
}
)
重置表单:resetFields
this.props.form.resetFields()
提交数据
这个类似于,通过使用form的onSubmit事件,在提交的button上进行
用法如下
<Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} onSubmit={this.handleSubmit}>
<Form.Item wrapperCol={{ span: 12, offset: 5 }}>
<Button type="primary" htmlType="submit"> //这里定义htmlType类似于原生js定义button的type
Submit
</Button>
</Form.Item>
</Form>
- 异步方式访问网页
- Silverlight:利用Panel实现自定义布局
- 《物联网智能终端信息安全白皮书》再次敲响物联网时代警钟
- Gitlab可视化代码树插件-Octotree
- 子线程调用UI线程的方法
- Silverlight:Dependency Property(依赖属性)学习笔记
- Silverlight:利用异步加载Xap实现自定义loading效果
- Docker容器学习梳理--手动制作系统镜像
- 怎样裁剪图片的局部
- vb中实现最佳按钮效果
- silverlight:wcf双工通讯学习笔记
- Docker容器学习梳理--web管理工具DockerUI部署记录
- Docker容器学习梳理-容器硬盘热扩容
- 检测到Loaderlock的问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MySQL information_schema详解 PARAMETERS
- Python 数据分析(四):Pandas 进阶
- 用 Python 写一个颜值测试小工具
- 当 Python 遇到微信
- CenterNet之loss计算代码解析
- 爬取林丹和赵雅淇的微博评论,看看网友都说了些什么
- 静默安装单机Oracle数据库软件
- 如何用 Python 生成炫酷二维码
- 一个在交流群里讨论过两轮的问题,答案竟然跟一个 PEP 有关
- Python 函数为什么会默认返回 None?
- 潘粤明的《龙岭迷窟》到底怎么样?我用 Python 得出了一些结论!
- [译]按照EIP-712规范签名完成委托和投票
- 更好Solidity合约调试工具: console.log
- 发现了合自己胃口的公众号,但文章太多翻来翻去真麻烦,还好我学了 Python
- 用 Python 下载抖音无水印视频