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>
- ASP.NET MVC如何实现自定义验证(服务端验证+客户端验证)
- .NET Core的文件系统[2]:FileProvider是个什么东西?
- Python多线程怎样优雅的响应中断异常
- .NET Core的文件系统[3]:由PhysicalFileProvider构建的物理文件系统
- .NET Core的文件系统[4]:由EmbeddedFileProvider构建的内嵌(资源)文件系统
- 学习July博文总结——支持向量机(SVM)的深入理解(下)
- 在gridview和datagrid里设置列宽
- ASP.NET MVC的Model元数据与Model模板:将”ListControl”引入ASP.NET MVC
- .NET Core的文件系统[5]:扩展文件系统构建一个简易版“云盘”
- 全球15%工作将被自动化,中国1亿人将面临失业
- ASP.NET MVC的Model元数据提供机制的实现
- 清官难断家务事,人工智能却来介入家庭伦理大戏
- 使用Symfony的Console组件构建命令行程序
- 微软编程教育都在搞什么?从code.org到makecode,从Minecraft到Micro:bit
- 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 数组属性和方法
- Flutter 使用Navigator进行局部跳转页面的方法
- Android小程序实现简易QQ界面
- Android小程序实现音乐播放列表
- 详解Android10的分区存储机制(Scoped Storage)适配教程
- Android自定义View实现可拖拽缩放的矩形框
- Android实现掷骰子效果
- Android实现侧滑菜单DrawerLayout
- Android :okhttp+Springmvc文件解析器实现android向服务器上传照片
- 纯小白都能看懂的《单个神经元》、《随机梯度下降》、《逻辑与》
- 使用Flutter开发的抖音国际版实例代码详解
- vue-cropper裁剪图片
- Android 开发使用PopupWindow实现弹出警告框的复用类示例
- python初学者笔记—关于 random 和 time 模块
- Android自定义日历效果
- Android 开发使用PopupWindow实现加载等待界面功能示例