Ant Design 組件提供了Input，InputNumber，Radio，Select，uplod等表單組件，但實際開發中這是不能滿足需求，同時我們希望可以繼續使用Form提供的驗證和提示等方法（使用起來確實很爽），這時需要自己動手封裝一些表單，同時我們還要保持方法可以繼續是使用。
組件的源碼 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.Groupconst 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提交。
組件的源碼 https://github.com/haozhaohang/ant-design-expand-component
以上所述是小編給大家介紹的Android實現Ant Design 自定義表單組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
