React利用Antd的Form组件实现表单功能(转载)
一、构造组件
1、表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等。
这里先引用了封装的表单域 <Form.Item />
2、使用Form.create处理后的表单具有自动收集数据并校验的功能,但如果不需要这个功能,或者默认的行为无法满足业务需求,可以选择不使用Form.create并自行处理数据
经过Form.create()包装过的组件会自带this.props.form属性,this.props.form提供了很多API来处理数据,如getFieldDecorator——用于和表单进行双向绑定等,详细参加Antd官方文档:点击此处查看
先展示表单样式:
import React from 'react';
import {Form, Table, Button, Select, Input, DatePicker} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const {RangePicker} = DatePicker;//获取日期选择控件中的日期范围控件
class UserManage extends React.Component {
render() {
const columns = [
{
title: '联系人',
dataIndex: 'userName',
key: 'userName',
}, {
title: '手机号',
dataIndex: 'mobile',
key: 'mobile',
}, {
title: '公司名称',
dataIndex: 'companyName',
key: 'companyName',
}, {
title: '最近活跃时间',
dataIndex: 'lastOnlineTime',
key: 'lastOnlineTime',
}, {
title: '禁言状态',
dataIndex: 'status',
key: 'status',
},
];
return (
<div>
<Form layout="inline" style={{marginBottom: '10px'}}>
<FormItem label="最近活跃时间">
<RangePicker style={{width: '255px'}}/>
</FormItem>
<FormItem label="用户">
<Input type="text" placeholder="公司名称、手机号" style={{width: '155px'}}/>
</FormItem>
<FormItem label="禁言状态">
<Select defaultValue="全部" style={{width: '155px'}}>
<Option value="全部">全部</Option>
<Option value="是">是</Option>
<Option value="否">否</Option>
</Select>
</FormItem>
<Button type="primary" style={{marginTop: '3px', marginRight: '3px'}}>查询</Button>
<Button style={{marginTop: '3px'}}>重置</Button>
</Form>
<Table
columns={columns}
/>
</div>
)
}
}
export default Form.create()(UserManage)
colums是Table组件的API,columns和Column组件使用相同的API:
dataIndex:列数据在数据项中对应的 key,支持a.b.c的嵌套写法
key:React 需要的 key,如果已经设置了唯一的dataIndex,可以忽略这个属性
二、使用getFieldDecorator(id, options) 进行表单交互
1、现在的问题就是如何获取各种查询条件的数据,所以先改写render()里面的代码,getFieldDecorator用于和表单进行双向绑定:
...
render(){
const {form} = this.props;
const {getFieldDecorator} = form;
...
return (
<div>
<Form onSubmit={this.handleQuery} layout="inline" style={{marginBottom: '10px'}}>
<FormItem label="最近活跃时间">
{getFieldDecorator('lastOnlineTime')(<RangePicker style={{width: '255px'}}/>)}
</FormItem>
<FormItem label="用户">
{getFieldDecorator('userQueryLike')(<Input type="text" placeholder="公司名称或手机号" style={{width: '155px'}}/>)}
</FormItem>
<FormItem label="禁言状态">
{getFieldDecorator('status', {initialValue: "全部"})(
<Select style={{width: '155px'}}>
<Option value="0">全部</Option>
<Option value="1">是</Option>
<Option value="2">否</Option>
</Select>)}
</FormItem>
<Button type="primary" htmlType="submit" style={{marginTop: '3px', marginRight: '3px'}}>查询</Button>
<Button style={{marginTop: '3px'}}>重置</Button>
</Form>
<Table
columns={columns} /*dataSource={(从model取得的数据)}*/
/>
</div>
)
}
...
参数 说明 类型 默认值
id 必填输入控件唯一标志。支持嵌套式的写法。 string
options.getValueFromEvent 可以把 onChange 的参数(如 event)转化为控件的值 function(..args) reference
options.initialValue 子节点的初始值,类型、可选值均由子节点决定(注意:由于内部校验时使用 === 判断是否变化,建议使用变量缓存所需设置的值而非直接使用字面量))
options.normalize 转换默认的 value 给控件 function(value, prevValue, allValues): any -
options.rules 校验规则,详细参考Antd官方文档 object[]
options.trigger 收集子节点的值的时机 string 'onChange'
options.validateFirst 当某一规则校验不通过时,是否停止剩下的规则的校验 boolean false
options.validateTrigger 校验子节点值的时机 string|string[] 'onChange'
options.valuePropName 子节点的值的属性,如 Switch 的是 'checked' string 'value'
2、上面给了表单一个onSubmit事件,当表单提交时执行handleQuery方法:
...
class UserManage extends React.Component {
//表单查询
handleQuery = (e) => {
if (e) e.preventDefault();
const {dispatch, form} = this.props;
form.validateFields((err, fieldsValue) => {
if (err) return;
//获取时间范围的值
const rangeValue = fieldsValue['lastOnlineTime'];
const userQueryLike = fieldsValue['userQueryLike'];
//获取查询条件
const values = {
...fieldsValue,
"lastOnlineTime": (rangeValue && rangeValue.length > 1) ?
([rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]) : null,
"userQueryLike": userQueryLike ? userQueryLike.trim() : userQueryLike,
};
dispatch({
type: "userManageModel/getUserList",
payload: {
values: values,
}
});
});
};
...
}
...
在此方法里又调用了form.validateFields校验并获取一组输入域的值与Error,入参fieldsValue就是从表单的FormItem里取到的值,然后使用fieldsValue['lastOnlineTime']这种形式,通过与之前写的getFieldDecorator('lastOnlineTime')产生映射,就获取了单个输入域的值。
总结一下,使用React的Form实现表单功能,必须要使用Form.create(组件),使包装的组件带有this.props.form属性,才能调用form的getFieldDecorator和validateFields方法,getFieldDecorator中的id对应validateFields中的fieldsValue[''];而columns中的dateIndex对应的是从model取到数据json串的键名,这个要分清
React利用Antd的Form组件实现表单功能(转载)的更多相关文章
- 使用 antd 的 form 组件来自定义提交的数据格式
最近使用antd UI 的表单提交数据,数据里面有的是数组,有的是对象.提交的时候还要去校验参数,让人非常头疼.在我仔细看完文档之后,发现 antd 的 form 组件做的非常不错,这些需求通通不是问 ...
- react引用antd的form表单
引用form是第三方插件ant插件,官网网址:https://ant.design/.用到的antd的版本是@2.0.1.form(https://ant.design/components/form ...
- ng form组件(表单)
tip: 数据的双向绑定(数据的双向绑定只是针对表单) 实现数据的双向绑定需要在app_module.ts(根模块)中进行注册一些东西 import {FormsModule} from '@angu ...
- React结合AntD的upload组件写头像上传
upload组件里面action就是调upload接口,获取图片url地址 setImg获取url,点击保存传到后台 action 上传头像方法 //上传头像 changeImg = info = ...
- antd做form表单的组件共用,利用mapPropsToFields填写默认值
做单页应用,不管是用Vue还是React,或者其他,有一个重要的原则,就是:组件重用. 既然组件可以重用,那么当添加一个信息,和修改该信息的布局必然是一致的,这时候,最好的方法自然是利用同一个组件,在 ...
- Django框架之Ajax和form组件
一.Django框架之查漏补缺 1)models,字段概况 name = models.CharField(max_length=) age = models.IntegerField() price ...
- Python - Django - form 组件基本用法
普通 form 表单的处理: reg.html: <!DOCTYPE html> <html lang="en"> <head> <met ...
- 封装react antd的form表单组件
form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
随机推荐
- spring学习笔记四:spring常用注解总结
使用spring的注解,需要在配置文件中配置组件扫描器,用于在指定的包中扫描注解 <context:component-scan base-package="xxx.xxx.xxx.x ...
- Excel中带字母的数字序列自增实现方法
示例: 在A1单元格输入以下公式,然后向下填充公式 =".mr"&ROW()&" {margin-right: "&ROW()& ...
- LG_3459_[POI2007]MEG-Megalopolis
题目描述 Byteotia has been eventually touched by globalisation, and so has Byteasar the Postman, who onc ...
- SVN图标含义说明
最经都在用Svn,对他上面的很多状态图标不是很理解,看了看它的帮助文档,说的很清楚,特地截张图. Svn不同状态图标及说明 - 简单 - 简单 Normal A fresh checked ...
- 模型压缩之Channel Pruning
论文地址 channel pruning是指给定一个CNN模型,去掉卷积层的某几个输入channel以及相应的卷积核, 并最小化裁剪channel后与原始输出的误差. 可以分两步来解决: channe ...
- SpringMVC之参数绑定
1.Controller package com.tz.controller; import org.springframework.beans.factory.annotation.Required ...
- centos7添加阿里云的epel源
有些包在别的yum源找不到,在阿里云的yum源里成功找到,这里记录在不影响base源的情况快速添加epel源的添加方法 wget https://mirrors.aliyun.com/epel/7Se ...
- 全平台Markdown笔记软件——Notable
简介 The markdown-based note-taking app that doesn't suck. 一款简介.跨平台的本地笔记软件,github地址:https://github.com ...
- [JS奇怪的世界]No.55 危險小叮嚀:陣列與for in
前言 前面已經瞭解了使用內建函數建構子的某些危險地方,但其實陣列與for in,也是有一些危險的地方. 陣列與for in 在前面幾個章節有講過陣列就是物件,所以我們一樣可以使用 for in來做處理 ...
- L53-Maximum-Subarray
题目描述 Find the contiguous subarray within an array (containing at least one number) which has the lar ...