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

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

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 (

{nameDecorator()}

{sexDecorator()}

提交

);

}

}

export default Form.create()(Test)

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

下面我們可以封裝一個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 =

return (

{value.map((v, i) => {

return (

{...others}

value={v}

suffix={closeBtn}

data-index={i}

onChange={() => this.handleChange(i)}

/>

);

})}

添加

);

}

}

InputArray.defaultProps = {

value: []

}

export default InputArray

這是我們就可以像引入Input組件一樣引入InputArray組件實(shí)現(xiàn)了一組姓名的提交。

{nameDecorator()}

組件主要使用的form提供getFieldDecorator方法，這個方法會向組件注入value參數(shù)，onChange方法，每次調(diào)用onChange方法都會去改變value，從而刷新整個組件。為什么會這樣那，其實(shí)Ant Design 會在表單組件外層包裹一層組件，維護(hù)一個State值，每次onChange都是在改變外部state值，調(diào)用setState來刷新表單組件。

Upload組件使用中也遇到一個坑，Upload組件action上傳地址參數(shù)也是必填參數(shù)，每次上傳都會直接上傳到服務(wù)器，不能和其它表單的數(shù)據(jù)一起提交，這時候我們也必須從新封裝一個上傳組件，同時因?yàn)榇嬖谖募驁D片數(shù)據(jù)就不能使用json格式和后臺進(jìn)行交互，必須使用new FormData()的數(shù)據(jù)格式上傳，也就是原生的表單的submit提交。

以上所述是小編給大家介紹的Android實(shí)現(xiàn)Ant Design 自定義表單組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

總結(jié)

以上是生活随笔為你收集整理的android 自定义表单,Android实现Ant Design 自定义表单组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。