android 自定义表单,Android实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法(使用起来确实很爽),这时需要自己动手封装一些表单,同时我们还要保持方法可以继续是使用。
下面看一下如何自己封装表单组件,这是一个最基础的表单使用例子:
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)
现在需求需要我们实现多个姓名的提交,这时使用UI组件提供的表单便无法实现。
下面我们可以封装一个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组件实现了一组姓名的提交。
{nameDecorator()}
组件主要使用的form提供getFieldDecorator方法,这个方法会向组件注入value参数,onChange方法,每次调用onChange方法都会去改变value,从而刷新整个组件。为什么会这样那,其实Ant Design 会在表单组件外层包裹一层组件,维护一个State值,每次onChange都是在改变外部state值,调用setState来刷新表单组件。
Upload组件使用中也遇到一个坑,Upload组件action上传地址参数也是必填参数,每次上传都会直接上传到服务器,不能和其它表单的数据一起提交,这时候我们也必须从新封装一个上传组件,同时因为存在文件或图片数据就不能使用json格式和后台进行交互,必须使用new FormData()的数据格式上传,也就是原生的表单的submit提交。
以上所述是小编给大家介绍的Android实现Ant Design 自定义表单组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
android 自定义表单,Android实现Ant Design 自定义表单组件相关推荐
- ant design form表单的时间处理
ant design form表单的时间处理 用ant design开发程序时,会碰到时间的字段,效果如下: 那么该怎么处理呢? 可以在表单中使用如下代码: import { DatePicker } ...
- ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式 问题 历程 UploadList 组件源码 h() 方法 实现 注 问题 技术:vue.ant design vue 在开发项 ...
- ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色 一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
- 实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
- antdesign卡片_10分钟精通Ant Design Form表单
目录被人诟病的Form Form的原理 Vue版Form的进化史本文适合React.Vue开发者阅读,10分钟不够?那就再加10分钟. 被人诟病的Form antd被人吐槽最多的除了彩蛋之外,那应该就 ...
- ant design vue 的 description组件中 label 默认样式的更改
这两天做项目,需要实现一个如下图的效果 于是我就去 ant design vue 里面找,发现 description 组件符合这个效果 但是写完之后我发现,这个组件的 label 并不能修改样式啊, ...
- Ant Design Pro 项目图表组件点击事件
背景:使用框架配套图表组件charts 要求柱形图可实现点击事件 方法:onReady 官网:https://charts.ant.design/zh/docs/api/options/events ...
- [ant design vue] 表单验证成功,提示信息不显示
以上是原图以及源代码,input中带有表单验证,但是输入0以后却不显示报错信息,后来通过大哥指点,因为一个a-form-item只验证一个input,所以给每一个input加一个a-form-item ...
- Ant Design Vue表单验证基本操作
通过 rules 属性传入约定的验证规则.并将 <a-form-item> 的 prop 属性设置为需校验的字段名即可 formRef.value .validate() 触发效验提示通 ...
最新文章
- “深度学习一点也不难!”
- 学python还是javascript_你觉得学 Python 还是 Java 更好找工作?
- GDCM:DICOM文件转储图像标题信息的测试程序
- 详测 Generics Collections TQueue (3): OnNotify、Extract
- Python利用matplotlib.animation和matplotlib.pyplot和ffmpeg录制动画并保存为MP4文件
- P3889-[GDOI2014]吃【线段树】
- 刘永行:领导者的得与失
- 【生信进阶练习1000days】day2-学习summarized experimental data与Down stream analysis
- c语言中的单词的意思及作用,c语言入门必背单词 具体含义是什么
- 关于STC8H8K64U单片机IAP升级过程
- linux用 弹出光驱 cdromeject_sw,Linux_Linux系统下光驱软开关与限速,一、光驱的软开关:eject -r cdro - phpStudy...
- python获取交互式ssh shell
- SpringBoot服务监控之Actuate
- 数据结构(C语言版)之栈及递归
- AR,VR和MR的概念区分
- metaspolit提示Exploit failed: You must select a target.
- stm32无源蜂鸣器定时器_stm32定时器实现PWM输出控制无源蜂鸣器(HAL)
- 实验六图的应用(通信网络)
- springboot windows下WORD文档转PDF
- 屏幕录制工具哪个好用?分享3款相见恨晚的软件
热门文章
- IntelliJ IDEA for Mac在MacOS模式下的版本控制/本地历史记录快捷键(VCS and Local History Shortcut)
- 使用 vim 开发-编译-查错-运行/测试-调试最佳实践流程
- Linux 常用的软件包管理器/软件包管理工具
- 混合模式商城的可经销商品池
- 小程序 input自动换行_直播 | 最实用的微信小程序自动化测试技术独家揭秘
- inputstreamreader未关闭会导致oom_Linux内核OOM机制分析和防止进程被OOM杀死的方法...
- java改文字乱码快捷键,java.util.Properties读取中文内容(UTF-8格式)的配置文件,发生中文乱码...
- php实现中间件6,说一说ThinkPHP6中五花八门的中间件_PHP开发框架教程
- vant按需引入没样式_vue vant-ui样式出不来的问题
- sping jdbc 链接mysql_Spring Boot JDBC 连接数据库示例