一、构造组件

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组件实现表单功能(转载)的更多相关文章

  1. 使用 antd 的 form 组件来自定义提交的数据格式

    最近使用antd UI 的表单提交数据,数据里面有的是数组,有的是对象.提交的时候还要去校验参数,让人非常头疼.在我仔细看完文档之后,发现 antd 的 form 组件做的非常不错,这些需求通通不是问 ...

  2. react引用antd的form表单

    引用form是第三方插件ant插件,官网网址:https://ant.design/.用到的antd的版本是@2.0.1.form(https://ant.design/components/form ...

  3. ng form组件(表单)

    tip: 数据的双向绑定(数据的双向绑定只是针对表单) 实现数据的双向绑定需要在app_module.ts(根模块)中进行注册一些东西 import {FormsModule} from '@angu ...

  4. React结合AntD的upload组件写头像上传

    upload组件里面action就是调upload接口,获取图片url地址 setImg获取url,点击保存传到后台   action 上传头像方法 //上传头像 changeImg = info = ...

  5. antd做form表单的组件共用,利用mapPropsToFields填写默认值

    做单页应用,不管是用Vue还是React,或者其他,有一个重要的原则,就是:组件重用. 既然组件可以重用,那么当添加一个信息,和修改该信息的布局必然是一致的,这时候,最好的方法自然是利用同一个组件,在 ...

  6. Django框架之Ajax和form组件

    一.Django框架之查漏补缺 1)models,字段概况 name = models.CharField(max_length=) age = models.IntegerField() price ...

  7. Python - Django - form 组件基本用法

    普通 form 表单的处理: reg.html: <!DOCTYPE html> <html lang="en"> <head> <met ...

  8. 封装react antd的form表单组件

    form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...

  9. 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

随机推荐

  1. h指数|JCR|ORCID|CCC|Research ID|BKCI|

    h指数有如下缺点: 年龄大且平庸的学者比杰出的青年学者的h-index大.学科之间h指数的评价标准不同.有时候,审稿人暗示作者引用自己文章. 再此处可找到相关信息: JCR上可以查询到影响因子,以下是 ...

  2. Dubbo的集群容错与负载均衡策略

    Dubbo的集群容错策略 正常情况下,当我们进行系统设计时候,不仅要考虑正常逻辑下代码该如何走,还要考虑异常情况下代码逻辑应该怎么走.当服务消费方调用服务提供方的服务出现错误时候,Dubbo提供了多种 ...

  3. staruml百度网盘下载

    分享staruml官方百度网盘下载 下载时间:2019年9月4日 21:27:37  StarUML(简称SU),是一种创建UML类图,生成类图和其他类型的统一建模语言(UML)图表的工具.StarU ...

  4. 高效能Windows人士的N个习惯之一:启动篇

    接触电脑十多年,经历了各种折腾阶段,这几年开始沉静下来,不再追求花哨的界面与应用,只注重工作的效率,逐渐养成了一套自己的操作习惯,感觉不错,特撰文分享.标题借用了一下<高效能人士的七个习惯> ...

  5. 烧光百亿的共享单车行业,ofo和摩拜到底该不该合并?

    共享经济领域可谓一地鸡毛,除了众多不靠谱的跟风项目外--共享马扎."老公寄存屋",更多的是不绝于耳的倒闭消息.尤其是在共享单车行业,暂且不提那些体量小的项目,单单是倒闭的大型共享单 ...

  6. 从社交到IP 庞大手游玩家大军迈向社群化之路

    庞大手游玩家大军迈向社群化之路" title="从社交到IP 庞大手游玩家大军迈向社群化之路"> 移动互联网及相关智能设备的快速迭进,不仅改变了我们的生活方式,也彻 ...

  7. gedit搭建c开发环境

    在管理外部工具中,创建启动脚本 #!/bin/sh DIR=$GEDIT_CURRENT_DOCUMENT_DIR NAME=$GEDIT_CURRENT_DOCUMENT_NAME /home/lx ...

  8. linux tc流量控制

    tc流量控制 项目背景 vintage3.0接口lookupforupdage增加一个策略,当带宽流量tx或rx超过40%,75%随机返回304:超过60%,此接口均返回304 为了对测试机器进行流量 ...

  9. FPGA小白学习之路(5)clk为什么要用posedge,而不用negedge(转)

    clk为什么要用posedge,而不用negedge 转自:http://www.cnblogs.com/dangxia/archive/2012/03/07/2383744.html Verilog ...

  10. 《前端面试加分项目》系列 企业级Vue瀑布流

    本文 GitHub github.com/ponkans/F2E 已收录,有一线大厂面试点思维导图,也整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习.文末有福利~~ 前言 接水怪又来 ...