Ant Design 元件提供了Input，InputNumber，Radio，Select，uplod等表單元件，但實際開發中這是不能滿足需求，同時我們希望可以繼續使用Form提供的驗證和提示等方法（使用起來確實很爽），這時需要自己動手封裝一些表單，同時我們還要保持方法可以繼續是使用。
元件的原始碼
下面看一下如何自行封裝表單元件，這是一個最基礎的表單使用範例:
1 import React, { PureComponent } from 'react'
2 import { Button, Form, Input, Radio } from 'antd'
3 import FormItem from 'components/FormItem'
4
5 const RadioGroup = Radio.Group
6 const options = [
7 { label: '男', value: 1 },
8 { label: '女', value: 2 },
9 ]
10
11 class Test extends PureComponent {
12 handleSubmit = (e) => {
13 e.preventDefault();
14
15 const { form: { validateFields } } = this.props;
16
17 validateFields((errors, values) => {
18 if (errors) {
19 return;
20 }
21 console.log(values)
22 })
23 }
24
25 render() {
26 const { form: { getFieldDecorator } } = this.props
27
28 const nameDecorator = getFieldDecorator('name')
29 const sexDecorator = getFieldDecorator('sex')
30
31 return (
32 <section>
33 <Form layout="horizontal" onSubmit={this.handleSubmit}>
34 <FormItem label="姓名">
35 {nameDecorator(<Input />)}
36 </FormItem>
37
38 <FormItem label="年龄">
39 {sexDecorator(<RadioGroup options={options} />)}
40 </FormItem>
41
42 <FormItem buttonsContainer>
43 <Button type="primary" size="default" htmlType="submit">提交</Button>
44 </FormItem>
45 </Form>
46 </section>
47 );
48 }
49 }
50
51 export default Form.create()(Test)
現在需求需要我們實作多個名稱的提交，這時使用UI元件提供的表單便無法實現。
下面我們可以封裝一個InputArrary元件:
1 import React, { PureComponent } from 'react'
2 import PropTypes from 'prop-types'
3 import { Button, Icon, Input } from 'antd'
4
5 import './index.scss'
6
7 class InputArray extends PureComponent {
8 constructor(props) {
9 super(props)
10 }
11
12 handleChange = index => {
13 const { value, onChange } = this.props
14 const newValue = [...value]
15
16 newValue[index] = target.value
17
18 onChange(newValue)
19 }
20
21 handleDelete = e => {
22 const target = e.currentTarget
23 const index = target.parentNode.parentNode.firstChild.dataset.index
24 const { value, onChange } = this.props
25 const newValue = [...value]
26
27 newValue.splice(Number(index), 1)
28
29 onChange(newValue)
30 }
31
32 handleAdd = () => {
33 const { value, onChange } = this.props
34 const newValue = [...value, '']
35
36 onChange(newValue)
37 }
38
39 render() {
40 const { value, ...others } = this.props
41
42 const closeBtn = <Icon type="close-circle" onClick={this.handleDelete} />
43
44 return (
45 <p className="input-array-component">
46 {value.map((v, i) => {
47 return (
48 <p key={i}>
49 <Input
50 {...others}
51 value={v}
52 suffix={closeBtn}
53 data-index={i}
54 onChange={() => this.handleChange(i)}
55 />
56 </p>
57 );
58 })}
59 <p>
60 <Button type="dashed" icon="plus" onClick={this.handleAdd}>添加</Button>
61 </p>
62 </p>
63 );
64 }
65 }
66
67 InputArray.defaultProps = {
68 value: []
69 }
70
71 export default InputArray
這是我們就可以像引入Input元件一樣引入InputArray元件實作了一組姓名的提交。
<FormItem label="姓名">{nameDecorator(<InputArray />)}
</FormItem
元件主要使用的form提供getFieldDecorator方法，這個方法會向元件注入value參數，onChange方法，每次都呼叫onChange方法都會去改變value，從而刷新整個元件。為什麼會這樣那，其實Ant Design 會在表單元件外層包裹一層元件，維護一個State值，每次onChange都是在改變外部state值，呼叫setState來刷新表單元件。
Upload元件使用中也遇到一個坑，Upload元件action上傳位址參數也是必填參數，每次上傳都會直接上傳到伺服器，不能和其它表單的資料一起提交，這時候我們也必須從新封裝一個上傳元件，同時因為存在檔案或圖片資料就無法使用json格式和後台進行交互，必須使用new FormData()的資料格式上傳，也就是原生的表單的submit提交。
元件的原始碼
# 如果為你提供了一定的幫助，請點 start 支援一下
以上是實作Ant Design自訂表單元件實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！