实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法(使用起来确实很爽),这时需要自己动手封装一些表单,同时我们还要保持方法可以继续是使用。
github的代码地址: https://github.com/haozhaohang/ant-design-expand-component
下面看一下如何自己封装表单组件,这是一个最基础的表单使用例子:
1 import React, { PureComponent } from 'react' 2 import { Button, Form, Input, Radio } from 'antd' 3 import FormItem from 'components/FormItem' 4 5 const RadioGroup = Radio.Group 6 const options = [ 7 { label: '男', value: 1 }, 8 { label: '女', value: 2 }, 9 ] 10 11 class Test extends PureComponent { 12 handleSubmit = (e) => { 13 e.preventDefault(); 14 15 const { form: { validateFields } } = this.props; 16 17 validateFields((errors, values) => { 18 if (errors) { 19 return; 20 } 21 console.log(values) 22 }) 23 } 24 25 render() { 26 const { form: { getFieldDecorator } } = this.props 27 28 const nameDecorator = getFieldDecorator('name') 29 const sexDecorator = getFieldDecorator('sex') 30 31 return ( 32 <section> 33 <Form layout="horizontal" onSubmit={this.handleSubmit}> 34 <FormItem label="姓名"> 35 {nameDecorator(<Input />)} 36 </FormItem> 37 38 <FormItem label="年龄"> 39 {sexDecorator(<RadioGroup options={options} />)} 40 </FormItem> 41 42 <FormItem buttonsContainer> 43 <Button type="primary" size="default" htmlType="submit">提交</Button> 44 </FormItem> 45 </Form> 46 </section> 47 ); 48 } 49 } 50 51 export default Form.create()(Test)
现在需求需要我们实现多个姓名的提交,这时使用UI组件提供的表单便无法实现。
下面我们可以封装一个InputArrary组件:
1 import React, { PureComponent } from 'react' 2 import PropTypes from 'prop-types' 3 import { Button, Icon, Input } from 'antd' 4 5 import './index.scss' 6 7 class InputArray extends PureComponent { 8 constructor(props) { 9 super(props) 10 } 11 12 handleChange = index => { 13 const { value, onChange } = this.props 14 const newValue = [...value] 15 16 newValue[index] = target.value 17 18 onChange(newValue) 19 } 20 21 handleDelete = e => { 22 const target = e.currentTarget 23 const index = target.parentNode.parentNode.firstChild.dataset.index 24 const { value, onChange } = this.props 25 const newValue = [...value] 26 27 newValue.splice(Number(index), 1) 28 29 onChange(newValue) 30 } 31 32 handleAdd = () => { 33 const { value, onChange } = this.props 34 const newValue = [...value, ''] 35 36 onChange(newValue) 37 } 38 39 render() { 40 const { value, ...others } = this.props 41 42 const closeBtn = <Icon type="close-circle" onClick={this.handleDelete} /> 43 44 return ( 45 <div className="input-array-component"> 46 {value.map((v, i) => { 47 return ( 48 <div key={i}> 49 <Input 50 {...others} 51 value={v} 52 suffix={closeBtn} 53 data-index={i} 54 onChange={() => this.handleChange(i)} 55 /> 56 </div> 57 ); 58 })} 59 <div> 60 <Button type="dashed" icon="plus" onClick={this.handleAdd}>添加</Button> 61 </div> 62 </div> 63 ); 64 } 65 } 66 67 InputArray.defaultProps = { 68 value: [] 69 } 70 71 export default InputArray
这是我们就可以像引入Input组件一样引入InputArray组件实现了一组姓名的提交。
<FormItem label="姓名">{nameDecorator(<InputArray />)} </FormItem
组件主要使用的form提供getFieldDecorator方法,这个方法会向组件注入value参数,onChange方法,每次调用onChange方法都会去改变value,从而刷新整个组件。为什么会这样那,其实Ant Design 会在表单组件外层包裹一层组件,维护一个State值,每次onChange都是在改变外部state值,调用setState来刷新表单组件。
Upload组件使用中也遇到一个坑,Upload组件action上传地址参数也是必填参数,每次上传都会直接上传到服务器,不能和其它表单的数据一起提交,这时候我们也必须从新封装一个上传组件,同时因为存在文件或图片数据就不能使用json格式和后台进行交互,必须使用new FormData()的数据格式上传,也就是原生的表单的submit提交。
特别注意:
编写自定义组件时,使用getFieldDecorator过程中,会遇到 (Warning: getFieldDecorator
will override value
, so please don't set value
directly and use setFieldsValue
to set it. )这样的警告,这是因为我们在自定义组件中定义了value值,getFieldDecorator会覆盖我们定义的值,需要添加默认值可以使用在getFieldDecorator
的时候,设置initialValue,删除在自定义组件中定义的value就可以了!可以查看issue#1
github的代码地址: https://github.com/haozhaohang/ant-design-expand-component
转载于:https://www.cnblogs.com/hzh-fe/p/7050338.html
实现Ant Design 自定义表单组件相关推荐
- android 自定义表单,Android实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
- ant design form表单的时间处理
ant design form表单的时间处理 用ant design开发程序时,会碰到时间的字段,效果如下: 那么该怎么处理呢? 可以在表单中使用如下代码: import { DatePicker } ...
- antdesign卡片_10分钟精通Ant Design Form表单
目录被人诟病的Form Form的原理 Vue版Form的进化史本文适合React.Vue开发者阅读,10分钟不够?那就再加10分钟. 被人诟病的Form antd被人吐槽最多的除了彩蛋之外,那应该就 ...
- 微信小程序之自定义表单组件(radio)
背景: 最近在做项目的时候遇到一个问题,那就是微信的官方表单组件的可扩展性不强,无法达到设计稿所要求的效果,所以想到了用自定义组件的方法自定义一个表单组件. (自定义组件其实往往用在需要复用的地方,比 ...
- Ant Design Vue表单验证基本操作
通过 rules 属性传入约定的验证规则.并将 <a-form-item> 的 prop 属性设置为需校验的字段名即可 formRef.value .validate() 触发效验提示通 ...
- [ant design vue] 表单验证成功,提示信息不显示
以上是原图以及源代码,input中带有表单验证,但是输入0以后却不显示报错信息,后来通过大哥指点,因为一个a-form-item只验证一个input,所以给每一个input加一个a-form-item ...
- [ant design vue] 关于ant design vue 表单报错合集
情况一:当我点击新增时会报以下错误: 原因是我在使用v-decorator的同时使用了v-model,如下图: 解决方案就是:把v-model删掉,需要动态获取值,可以通过: this.form.ge ...
- Angular: [ControlValueAccessor] 自定义表单控件
Angular: [ControlValueAccessor] 自定义表单控件 我们在实际开发中,通常会遇到各种各样的定制化功能,会遇到有些组件会与 Angular 的表单进行交互,这时候我们一般会从 ...
- Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
前言 写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值 简化了渲染的子组 ...
最新文章
- Leangoo_多团队,大规模敏捷开发实现过程
- 皮一皮:据说金庸老爷子的凌波微步已被证实存在并已经广为流传...
- POJ 3648 Wedding
- 伺服驱动器的 三环控制 电流环 速度环 位置环
- python饼形图_Python | 饼形图
- 【英语学习】【Level 07】U07 Stories of my Life L3 Campus memories
- foreach 页面超时php,解决php运行超时的方法
- python转义例题_笨办法学Python记录--习题37 异常,lambda,yield,转义序列
- 零基础带你学习MySQL—分页查询(十八)
- 08.实例方法和类方法的区别与及工厂方法
- SharePoint Framework 基于团队的开发(一)
- 02. Prefer consts, enums, and inlines to #defines
- C#多线程之三:解决多线程编程中大并发数等待唤醒的问题
- 王二的经济学故事读书笔记
- vue项目页面的打印和下载PDF加loading效果(加水印)
- 使用python绘制函数曲线
- push ebp到底是什么意思
- 【C++】多线程同步
- 2022社区团购回暖,创新 O2O 生鲜电商新零售解决方案
- 在win7系统中设置共享,但是必须要关闭防火墙
热门文章
- 取值范围_从int取值范围谈起
- matlab怎么根据波宽度去波,使用Matlab图像处理(三)——图像滤波原理
- 数据验证html,JavaScript 表单数据验证
- easyexcel生成excel_阿里JAVA解析Excel工具easyexcel
- 山东大学计算机学院预推免,山东大学计算机科学与技术学院(专业学位)计算机技术保研...
- HTML5文档结构主体结构 语义结构,html5组织文档结构.pdf
- linux命令安装组件,Linux安装各种组件
- Java学习总结:55(偶对象保存:Map接口)
- Java孩子父母类,@Output孩子和父母之间的沟通 . 角2(5)
- 【matlab】我要自学网笔记总结 1.3