Ant Design 組件提供了Input,InputNumber,Radio,Select,uplod等表單組件,但實(shí)際開(kāi)發(fā)中這是不能滿足需求,同時(shí)我們希望可以繼續(xù)使用Form提供的驗(yàn)證和提示等方法(使用起來(lái)確實(shí)很爽),這時(shí)需要自己動(dòng)手封裝一些表單,同時(shí)我們還要保持方法可以繼續(xù)是使用。
網(wǎng)站設(shè)計(jì)制作過(guò)程拒絕使用模板建站;使用PHP+MYSQL原生開(kāi)發(fā)可交付網(wǎng)站源代碼;符合網(wǎng)站優(yōu)化排名的后臺(tái)管理系統(tǒng);成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)收費(fèi)合理;免費(fèi)進(jìn)行網(wǎng)站備案等企業(yè)網(wǎng)站建設(shè)一條龍服務(wù).我們是一家持續(xù)穩(wěn)定運(yùn)營(yíng)了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 ( <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)
現(xiàn)在需求需要我們實(shí)現(xiàn)多個(gè)姓名的提交,這時(shí)使用UI組件提供的表單便無(wú)法實(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 = <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組件實(shí)現(xiàn)了一組姓名的提交。
<FormItem label="姓名"> {nameDecorator(<InputArray />)} </FormItem
組件主要使用的form提供getFieldDecorator方法,這個(gè)方法會(huì)向組件注入value參數(shù),onChange方法,每次調(diào)用onChange方法都會(huì)去改變value,從而刷新整個(gè)組件。為什么會(huì)這樣那,其實(shí)Ant Design 會(huì)在表單組件外層包裹一層組件,維護(hù)一個(gè)State值,每次onChange都是在改變外部state值,調(diào)用setState來(lái)刷新表單組件。
Upload組件使用中也遇到一個(gè)坑,Upload組件action上傳地址參數(shù)也是必填參數(shù),每次上傳都會(huì)直接上傳到服務(wù)器,不能和其它表單的數(shù)據(jù)一起提交,這時(shí)候我們也必須從新封裝一個(gè)上傳組件,同時(shí)因?yàn)榇嬖谖募驁D片數(shù)據(jù)就不能使用json格式和后臺(tái)進(jìn)行交互,必須使用new FormData()的數(shù)據(jù)格式上傳,也就是原生的表單的submit提交。
組件的源碼 https://github.com/haozhaohang/ant-design-expand-component
以上所述是小編給大家介紹的Android實(shí)現(xiàn)Ant Design 自定義表單組件,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!
網(wǎng)頁(yè)名稱:Android實(shí)現(xiàn)AntDesign自定義表單組件
文章轉(zhuǎn)載:http://jinyejixie.com/article36/pochsg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、網(wǎng)站策劃、搜索引擎優(yōu)化、商城網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)