Ant Design 組件提供了Input，InputNumber，Radio，Select，uplod等表單組件，但實(shí)際開發(fā)中這是不能滿足需求，同時(shí)我們希望可以繼續(xù)使用Form提供的驗(yàn)證和提示等方法（使用起來確實(shí)很爽），這時(shí)需要自己動(dòng)手封裝一些表單，同時(shí)我們還要保持方法可以繼續(xù)是使用。
網(wǎng)站設(shè)計(jì)制作過程拒絕使用模板建站；使用PHP+MYSQL原生開發(fā)可交付網(wǎng)站源代碼;符合網(wǎng)站優(yōu)化排名的后臺管理系統(tǒng)；成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)收費(fèi)合理；免費(fèi)進(jìn)行網(wǎng)站備案等企業(yè)網(wǎng)站建設(shè)一條龍服務(wù).我們是一家持續(xù)穩(wěn)定運(yùn)營了10多年的成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司。
組件的源碼 https://github.com/haozhaohang/ant-design-expand-component
下面看一下如何自己封裝表單組件，這是一個(gè)最基礎(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 (
);
}
}
export default Form.create()(Test)現(xiàn)在需求需要我們實(shí)現(xiàn)多個(gè)姓名的提交，這時(shí)使用UI組件提供的表單便無法實(shí)現(xiàn)。
下面我們可以封裝一個(gè)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 = 這是我們就可以像引入Input組件一樣引入InputArray組件實(shí)現(xiàn)了一組姓名的提交。
{nameDecorator( )}
組件主要使用的form提供getFieldDecorator方法，這個(gè)方法會向組件注入value參數(shù)，onChange方法，每次調(diào)用onChange方法都會去改變value，從而刷新整個(gè)組件。為什么會這樣那，其實(shí)Ant Design 會在表單組件外層包裹一層組件，維護(hù)一個(gè)State值，每次onChange都是在改變外部state值，調(diào)用setState來刷新表單組件。
Upload組件使用中也遇到一個(gè)坑，Upload組件action上傳地址參數(shù)也是必填參數(shù)，每次上傳都會直接上傳到服務(wù)器，不能和其它表單的數(shù)據(jù)一起提交，這時(shí)候我們也必須從新封裝一個(gè)上傳組件，同時(shí)因?yàn)榇嬖谖募驁D片數(shù)據(jù)就不能使用json格式和后臺進(jìn)行交互，必須使用new FormData()的數(shù)據(jù)格式上傳，也就是原生的表單的submit提交。
組件的源碼 https://github.com/haozhaohang/ant-design-expand-component
以上所述是小編給大家介紹的Android實(shí)現(xiàn)Ant Design 自定義表單組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
