實現Ant Design 自定義表單組件

　　Ant Design 組件提供了Input，InputNumber，Radio，Select，uplod等表單組件，但實際開發中這是不能滿足需求，同時我們希望可以繼續使用Form提供的驗證和提示等方法（使用起來確實很爽），這時需要自己動手封裝一些表單，同時我們還要保持方法可以繼續是使用。

　　github的代碼地址: https://github.com/haozhaohang/ant-design-expand-component

　

　　下面看一下如何自己封裝表單組件，這是一個最基礎的表單使用例子:

import React, { PureComponent } from 'react'
import { Button, Form, Input, Radio } from 'antd'
import FormItem from 'components/FormItem'

const RadioGroup = Radio.Group
const options = [
    { label: '男', value: 1 },
    { label: '女', value: 2 },
]

class Test extends PureComponent {
    handleSubmit = (e) => {
        e.preventDefault();

        const { form: { validateFields } } = this.props;

        validateFields((errors, values) => {
            if (errors) {
                return;
            }
            console.log(values)
        })
    }

    render() {
        const { form: { getFieldDecorator } } = this.props

        const nameDecorator = getFieldDecorator('name')
        const sexDecorator = getFieldDecorator('sex')

        return (
            <section>
                <Form layout="horizontal" onSubmit={this.handleSubmit}>
                    <FormItem label="姓名">
                        {nameDecorator(<Input />)}
                    </FormItem>

                    <FormItem label="年齡">
                        {sexDecorator(<RadioGroup options={options} />)}
                    </FormItem>

                    <FormItem buttonsContainer>
                        <Button type="primary" size="default" htmlType="submit">提交</Button>
                    </FormItem>
                </Form>
            </section>
        );
    }
}

export default Form.create()(Test)

 

　　現在需求需要我們實現多個姓名的提交，這時使用UI組件提供的表單便無法實現。

　　下面我們可以封裝一個InputArrary組件:

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Button, Icon, Input } from 'antd'

import './index.scss'

class InputArray extends PureComponent {
    constructor(props) {
        super(props)
    }

    handleChange = index => {
        const { value, onChange } = this.props
        const newValue = [...value]

        newValue[index] = target.value

        onChange(newValue)
    }

    handleDelete = e => {
        const target = e.currentTarget
        const index = target.parentNode.parentNode.firstChild.dataset.index
        const { value, onChange } = this.props
        const newValue = [...value]

        newValue.splice(Number(index), 1)

        onChange(newValue)
    }

    handleAdd = () => {
        const { value, onChange } = this.props
        const newValue = [...value, '']

        onChange(newValue)
    }

    render() {
        const { value, ...others } = this.props

        const closeBtn = <Icon type="close-circle" onClick={this.handleDelete} />

        return (
            <div className="input-array-component">
                {value.map((v, i) => {
                    return (
                        <div key={i}>
                            <Input
                                {...others}
                                value={v}
                                suffix={closeBtn}
                                data-index={i}
                                onChange={() => this.handleChange(i)}
                            />
                        </div>
                    );
                })}
                <div>
                    <Button type="dashed" icon="plus" onClick={this.handleAdd}>添加</Button>
                </div>
            </div>
        );
    }
}

InputArray.defaultProps = {
    value: []
}

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提交。

 

　　特別注意：

　　　　編寫自定義組件時，使用getFieldDecorator過程中，會遇到 (Warning: getFieldDecorator will override value, so please don't set value directly and use setFieldsValue to set it.  ）這樣的警告，這是因為我們在自定義組件中定義了value值，getFieldDecorator會覆蓋我們定義的值，需要添加默認值可以使用在getFieldDecorator的時候，設置initialValue，刪除在自定義組件中定義的value就可以了！可以查看issue#1

 

　　github的代碼地址: https://github.com/haozhaohang/ant-design-expand-component