React如何利用Antd的Form组件实现表单功能详解

我会带着你远行 2022-10-15 00:42 273阅读 0赞

一、构造组件  
1、表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。

这里先引用了封装的表单域 <Form.Item />

2、使用Form.create处理后的表单具有自动收集数据并校验的功能，但如果不需要这个功能，或者默认的行为无法满足业务需求，可以选择不使用Form.create并自行处理数据

经过Form.create()包装过的组件会自带this.props.form属性，this.props.form提供了很多API来处理数据，如getFieldDecorator——用于和表单进行双向绑定等，详细参加Antd官方文档：点击此处查看

先展示表单样式：

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
46  
47  
48  
49  
50  
51  
52  
53  
54  
55  
56  
57  
58  
59  
60  
61  
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用于和表单进行双向绑定：

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
...  
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方法：

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
...  
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串的键名，这个要分清

除了这种方法，还有两种实现获取input输入框的值然后提交的方法，可以看这篇文章：React获取input的值并提交的两种方法