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) eference
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要领：