一、構(gòu)造組件
1、表單一定會包含表單域，表單域可以是輸入控件，標(biāo)準(zhǔn)表單域，標(biāo)簽，下拉菜單，文本域等。
這里先引用了封裝的表單域 <Form.Item />
2、使用Form.create處理后的表單具有自動收集數(shù)據(jù)并校驗的功能，但如果不需要這個功能，或者默認(rèn)的行為無法滿足業(yè)務(wù)需求，可以選擇不使用Form.create并自行處理數(shù)據(jù)
經(jīng)過Form.create()包裝過的組件會自帶this.props.form屬性，this.props.form提供了很多API來處理數(shù)據(jù)，如getFieldDecorator——用于和表單進(jìn)行雙向綁定等，詳細(xì)參加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 {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: '聯(lián)系人', dataIndex: 'userName', key: 'userName', }, { title: '手機(jī)號', dataIndex: 'mobile', key: 'mobile', }, { title: '公司名稱', dataIndex: 'companyName', key: 'companyName', }, { title: '最近活躍時間', dataIndex: 'lastOnlineTime', key: 'lastOnlineTime', }, { title: '禁言狀態(tài)', 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="公司名稱、手機(jī)號" style={{width: '155px'}}/> </FormItem> <FormItem label="禁言狀態(tài)"> <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：列數(shù)據(jù)在數(shù)據(jù)項中對應(yīng)的 key，支持a.b.c的嵌套寫法
key：React 需要的 key，如果已經(jīng)設(shè)置了唯一的dataIndex，可以忽略這個屬性
二、使用getFieldDecorator(id, options) 進(jìn)行表單交互
1、現(xiàn)在的問題就是如何獲取各種查詢條件的數(shù)據(jù)，所以先改寫render()里面的代碼，getFieldDecorator用于和表單進(jìn)行雙向綁定：
|
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="公司名稱或手機(jī)號" style={{width: '155px'}}/>)} </FormItem> <FormItem label="禁言狀態(tài)"> {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取得的數(shù)據(jù))}*/ /> </div> )}... |
| 參數(shù) | 說明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| id | 必填輸入控件唯一標(biāo)志。支持嵌套式的寫法。 | string | |
| options.getValueFromEvent | 可以把 onChange 的參數(shù)（如 event）轉(zhuǎn)化為控件的值 | function(..args) | reference |
| options.initialValue |
子節(jié)點的初始值，類型、可選值均由子節(jié)點決定(注意：由于內(nèi)部校驗時使用 === 判斷是否變化，建議使用變量緩存所需設(shè)置的值而非直接使用字面量)) |
||
| options.normalize | 轉(zhuǎn)換默認(rèn)的 value 給控件 | function(value, prevValue, allValues): any | - |
| options.rules | 校驗規(guī)則，詳細(xì)參考Antd官方文檔 | object[] | |
| options.trigger | 收集子節(jié)點的值的時機(jī) | string | 'onChange' |
| options.validateFirst | 當(dāng)某一規(guī)則校驗不通過時，是否停止剩下的規(guī)則的校驗 | boolean | false |
| options.validateTrigger | 校驗子節(jié)點值的時機(jī) | string|string[] | 'onChange' |
| options.valuePropName | 子節(jié)點的值的屬性，如 Switch 的是 'checked' | string | 'value' |
2、上面給了表單一個onSubmit事件，當(dāng)表單提交時執(zhí)行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, } }); }); };...}... |
在此方法里又調(diào)用了form.validateFields校驗并獲取一組輸入域的值與Error，入?yún)ieldsValue就是從表單的FormItem里取到的值，然后使用fieldsValue['lastOnlineTime']這種形式，通過與之前寫的getFieldDecorator('lastOnlineTime')產(chǎn)生映射，就獲取了單個輸入域的值。
總結(jié)一下，使用React的Form實現(xiàn)表單功能，必須要使用Form.create(組件)，使包裝的組件帶有this.props.form屬性，才能調(diào)用form的getFieldDecorator和validateFields方法，getFieldDecorator中的id對應(yīng)validateFields中的fieldsValue['']；而columns中的dateIndex對應(yīng)的是從model取到數(shù)據(jù)json串的鍵名，這個要分清
除了這種方法，還有兩種實現(xiàn)獲取input輸入框的值然后提交的方法，可以看這篇文章：React獲取input的值并提交的兩種方法
總結(jié)
到此這篇關(guān)于React如何利用Antd的Form組件實現(xiàn)表單功能詳解的文章就介紹到這了,更多相關(guān)React用Form組件實現(xiàn)表單內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/GuanJdoJ/article/details/83306931
