Android實現(xiàn)Ant Design 自定義表單組件
Ant Design 組件提供了Input,InputNumber,Radio,Select,uplod等表單組件,但實際開發(fā)中這是不能滿足需求,同時我們希望可以繼續(xù)使用Form提供的驗證和提示等方法(使用起來確實很爽),這時需要自己動手封裝一些表單,同時我們還要保持方法可以繼續(xù)是使用。
組件的源碼 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.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)在需求需要我們實現(xiàn)多個姓名的提交,這時使用UI組件提供的表單便無法實現(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 = <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組件實現(xiàn)了一組姓名的提交。
<FormItem label="姓名">
{nameDecorator(<InputArray />)}
</FormItem
組件主要使用的form提供getFieldDecorator方法,這個方法會向組件注入value參數(shù),onChange方法,每次調用onChange方法都會去改變value,從而刷新整個組件。為什么會這樣那,其實Ant Design 會在表單組件外層包裹一層組件,維護一個State值,每次onChange都是在改變外部state值,調用setState來刷新表單組件。
Upload組件使用中也遇到一個坑,Upload組件action上傳地址參數(shù)也是必填參數(shù),每次上傳都會直接上傳到服務器,不能和其它表單的數(shù)據(jù)一起提交,這時候我們也必須從新封裝一個上傳組件,同時因為存在文件或圖片數(shù)據(jù)就不能使用json格式和后臺進行交互,必須使用new FormData()的數(shù)據(jù)格式上傳,也就是原生的表單的submit提交。
組件的源碼 https://github.com/haozhaohang/ant-design-expand-component
以上所述是小編給大家介紹的Android實現(xiàn)Ant Design 自定義表單組件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
Android中asset文件夾與raw文件夾的區(qū)別深入解析
本篇文章是對Android中的asset文件夾與raw文件夾區(qū)別進行了詳細的分析介紹,需要的朋友參考下2013-06-06
Android?Jetpack組件ViewModel基本用法詳解
這篇文章主要為大家介紹了Android?Jetpack組件ViewModel基本用法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01
Android使用Activity實現(xiàn)簡單的可輸入對話框
大家在做彈出對話框效果的時候最容易想到的是用Dialog顯示,但其實彈出對話框的實現(xiàn)效果有兩種:Dialog和Activity,那么下面這篇文章就來給大家介紹了關于Android使用Activity如何實現(xiàn)一個簡單的可輸入對話框的相關資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-10-10
Android點擊WebView實現(xiàn)圖片縮放及滑動瀏覽效果
這篇文章主要為大家詳細介紹了Android點擊WebView實現(xiàn)圖片縮放及滑動瀏覽效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-12-12

