Android實(shí)現(xiàn)Ant Design 自定義表單組件
Ant Design 組件提供了Input,InputNumber,Radio,Select,uplod等表單組件,但實(shí)際開(kāi)發(fā)中這是不能滿足需求,同時(shí)我們希望可以繼續(xù)使用Form提供的驗(yàn)證和提示等方法(使用起來(lái)確實(shí)很爽),這時(shí)需要自己動(dòng)手封裝一些表單,同時(shí)我們還要保持方法可以繼續(xù)是使用。
組件的源碼 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ì)腳本之家網(wǎng)站的支持!
- Android自定義組件獲取本地圖片和相機(jī)拍照?qǐng)D片
- Android 自定義組件成JAR包的實(shí)現(xiàn)方法
- Android自定義組件ListPopWindow
- android自定義組件實(shí)現(xiàn)方法
- Android自定義加載loading view動(dòng)畫(huà)組件
- Android UI設(shè)計(jì)系列之自定義DrawView組件實(shí)現(xiàn)數(shù)字簽名效果(5)
- Android中自定義Checkbox組件實(shí)例
- Android自定義View設(shè)定到FrameLayout布局中實(shí)現(xiàn)多組件顯示的方法 分享
- Android編程自定義組件實(shí)例詳解
相關(guān)文章
android開(kāi)發(fā)教程之開(kāi)機(jī)啟動(dòng)服務(wù)service示例
如果開(kāi)機(jī)啟動(dòng)一個(gè)Activity,開(kāi)機(jī)首先看的界面,是你的程序界面,如果為了,開(kāi)機(jī)后也啟動(dòng)你的程序,但是不顯示自己程序的界面,就要用Service服務(wù),下面是開(kāi)機(jī)啟動(dòng)服務(wù)service示例2014-03-03android學(xué)習(xí)筆記之View的滑動(dòng)
Android開(kāi)發(fā)中我們常常需要View滑動(dòng)實(shí)現(xiàn)一些絢麗的效果來(lái)優(yōu)化用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于android學(xué)習(xí)筆記之View滑動(dòng)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01Android使用Dialog風(fēng)格彈出框的Activity
這篇文章主要為大家詳細(xì)介紹了Android使用Dialog風(fēng)格彈出框的Activity,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09Android studio 項(xiàng)目手動(dòng)在本地磁盤(pán)中刪除module后,殘留文件夾無(wú)法刪除的問(wèn)題解決方法
這篇文章主要介紹了Android studio 項(xiàng)目手動(dòng)在本地磁盤(pán)中刪除module后,殘留文件夾無(wú)法刪除問(wèn)題,本文給出了解決方法,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03Android SQLite數(shù)據(jù)庫(kù)徹底掌握數(shù)據(jù)存儲(chǔ)
這篇文章主要介紹了 Android SQLite數(shù)據(jù)庫(kù)的相關(guān)資料,這里對(duì)Android SQLlite做了詳細(xì)介紹,需要的朋友可以參考下2016-10-10Android從網(wǎng)絡(luò)中獲得一張圖片并顯示在屏幕上的實(shí)例詳解
這篇文章主要介紹了Android從網(wǎng)絡(luò)中獲得一張圖片并顯示在屏幕上的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助大家實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-08-08獲取Activity棧,判斷當(dāng)前Activity位置的方法
下面小編就為大家分享一篇獲取Activity棧,判斷當(dāng)前Activity位置的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03Android連接MySQL數(shù)據(jù)庫(kù)實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Android連接MySQL數(shù)據(jù)庫(kù)實(shí)現(xiàn)方法,在Android應(yīng)用程序中連接MySQL數(shù)據(jù)庫(kù)可以幫助開(kāi)發(fā)人員實(shí)現(xiàn)更豐富的數(shù)據(jù)管理功能,而且在Android中操作數(shù)據(jù)庫(kù)真的太智能了,需要的朋友可以參考下2024-02-02Android實(shí)現(xiàn)滑動(dòng)刻度尺效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)滑動(dòng)刻度尺效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06