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 自定义表单组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/347541.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

逆向行驶!数据结构双向链表DoubleLinkedList,Java实现增删改查

文章目录节点类链表类测试类双向链表也叫双链表,是链表的一种,它的每个数据结点中都有两个指针,分别指向直接后继和直接前驱。所以,从双向链表中的任意一个结点开始,都可以很方便地访问它的前驱结点和后继结点。 节点类…

【PostmanJMeter】使用Postman和JMeter进行signature签名

一、前言 ​ 有些接口的请求会带上sign(签名)进行请求,各接口对sign的签名内容、方式可能不一样,但一般都是从接口的入参中选择部分内容组成一个字符串,然后再进行签名操作, 将结果赋值给sign; 完整规范的接口文档都会…

詹金斯搭建_詹金斯的Maven报告

詹金斯搭建代码质量是一个敏感的话题。 它会影响您的维护成本以及客户满意度。 更不用说您的开发人员使用代码的动力了。 谁想要修复难看的代码,对吗? 讨论代码质量总是需要事实和数字! 因此,这是一个简短的教程,介绍…

android tcp判断服务器是否断开,Android tcp客户端连接,然后从java服务器断开连接...

我在我的电脑上执行java服务器并让我的android设备连接到它。我可以连接它,但一旦连接就会断开连接。我确信在android方面我需要做一些事情,但我很少迷失它。我有互联网许可,所以很好。Android tcp客户端连接,然后从java服务器断开…

Oracle应用容器云的自由

在这篇博客文章中,我将介绍如何部署CloudEE封装在杜克大学应用自由尤伯杯罐子Oracle应用集装箱云端 。 在Oracle Application Container Cloud中进行部署所需的部署工件是一个ZIP归档文件,其中包含应用程序ber-jar和清单文件(manifest.json&…

android已经点击,【已解决】android中点击其他的(如Button等)但是EditText却没有失去焦点...

【问题】android的app中,在对于EditText已经实现了:OnFocusChangeListener mFocusChangedListener;EditText variableValueView (EditText) variableLayout.findViewById(R.id.variableValue);EditText variableValueView (EditText) variableLayout.f…

简洁明了!Java实现单向环形链表以解决约瑟夫环Josepfu问题

文章目录简单介绍代码实现简单介绍 如果把单链表的最后一个节点的指针指向链表头部,而不是指向NULL,那么就构成了一个单向循环链表,通俗讲就是让尾节点指向头结点。 单向环形链表应用场景:Josephu(约瑟夫、约瑟夫环)问题&#xf…

荣耀v10Android9新功能,荣耀10、荣耀V10开启安卓9.0内测 日常领跑行业

【PConline 资讯】今天(8月9日)早上10点,荣耀总裁赵明发微博宣布荣耀已经有四款机型面向少部分用户推送安卓9.0内部测试版本。实际上,在8月8日晚上,花粉论坛就已经公布华为4款机型内测安卓 9.0 版本,荣耀手机两款旗舰进入升级名单…

状态模式 设计模式_设计模式:状态

状态模式 设计模式本文将介绍状态设计模式 。 它是行为设计模式之一 。 您无需了解许多理论即可了解模式的主要概念。 该文章将分为几个部分,在其中我将提供有关需要应用该模式的情况,它所具有的利弊以及用法示例的信息。 有时,当对象的内部…

字符串得结果!Java数组模拟栈以实现中缀表达式综合计算器,字符串表达式计算器

文章目录数组模拟栈类中缀表达式计算器类(测试类)数组模拟栈类 主要实现栈的一些基本功能,以及在该场景下的功能。 //先创建一个栈 class AStack {private int maxSize; //栈的大小private int[] stack; //数组模拟栈private int top -1; …

android webview javascript不执行,WebView中的JavaScript为什么不执行?

浏览器未开启javascript使用的js代码有问题,webview不兼容该代码。1) 第一个坎:WebSettingsWebSettings webSettings mWebView.getSettings();webSettings.setJavaScriptEnabled(true);2) 第二个坎: 有物在运行脚本前,要有docume…

中缀转后缀表达式,带括号的后缀表达式综合计算器,Java栈数据结构实现

文章目录中缀表达式转后缀表达式思路逆波兰表达式计算思路代码实现中缀表达式转后缀表达式思路 1、初始化两个栈:运算符栈s1和储存中间结果的栈s2 2、从左至右扫描中缀表达式 3、遇到操作数时,将其压入s2 4、遇到运算符时,比较其与s1栈顶…

Java中的AES加密和解密(CBC模式)

通过有线方式传输诸如纯文本密码之类的机密数据总是容易受到安全性的影响,始终建议对此类信息进行加密并使用SSL传输这些机密数据.Java为此提供了多种加密算法。在本文中,我们将讨论Java中具有CBC模式的AES(高级加密标准)对称加密…

hiti打印机android驱动,HiTi 打印机 驱动程序下载——更新 HiTi 软件

HiTi 打印机驱动程序下载如何手动下载和更新:你可以通过 %%os%% 或通过执行 Windows 更新获取基本的 HiTi Printer 驱动程序。 内置驱动程序将支持Printer的基本功能,但通常不支持更高级的功能。以下是手动更新这些 HiTi 设备驱动程序的完整指南。程序员: HiTi 类别…

Java实现最小二乘法线性拟合,传感与检测,单臂半桥全桥实验,江南大学自动化

因为作为资源上传不方便我们获取且我想免费分享给有需要的小伙伴,以后所有实验报告都通过文章形式记录输出了,仅供参考,欢迎交流。(最小二乘法代码在文末) 电桥特性曲线: Java实现最小二乘法线性拟合及计算…

android task详解,Android AsyncTask的使用详解

当然,我们在进行耗时操作或者更新UI时,是可以使用匿名线程的,但是此种方式是存在缺陷的:第一,线程的开销较大,如果每个任务都要创建一个线程,那么应用 程序的效率要低很多;第二&…

【Error】IDEA报错:org.jetbrains.jps.builders.java.dependencyView.TypeRepr$PrimitiveType cannot be cast t

错误日志: org.jetbrains.jps.builders.java.dependencyView.TypeRepr$PrimitiveType cannot be cast to org.jetbrains.jps.builders.java.dependencyView.TypeRepr$ClassType 解决方法:

ReSQL的?

大约在2009年创造出来的NoSQL名字标志着从“传统”关系模型的转变。 在2009年之前,有相当多的非关系数据库,但是在最近几年中,我们看到了许多新产品(例如, 我在上一篇文章中可以看到“ NoSQL格局” )。 一般…

数据结构,Java实现递归回溯,寻找出迷宫路线,解决迷宫问题

/*** Author: Yeman* Date: 2021-10-28-22:52* Description:*/ public class Labyrinth {public static void main(String[] args) {//七行八列的迷宫地图int[][] map new int[8][7];//设置墙for (int i 0; i < 7; i) {map[0][i] 1;map[7][i] 1;}for (int i 0; i < …

android动画优缺点,Android动画总结

动画分为三种&#xff1a;View动画、帧动画和属性动画View动画View动画共有四种动画&#xff1a;TranslateAnimation、RotateAnimation、ScaleAnimation和AlphaAnimation。四个动画类都继承于抽象类Animation。名称标签子类效果平移动画TranslateAnimation移动View缩放动画Scal…