Ant Design中getFieldDecorator方法的特殊用法(小bug)
记录Ant Design中getFieldDecorator方法的特殊的一个用法
了解Ant Design表单的小伙伴都知道,getFieldDecorator在大部分情况下是用来绑定一个控件的,即像如下用法:
{getFieldDecorator(`name`, {})(
<Input/>
)}
在项目开发过程中,我曾遇到这么一个需求:不定量的添加人物图片及相应的名字,且添加图片和输入框的控件随用户点击而增加(这里只需用state记录控件数量,由点击事件改变这个state即可),再简单来说,不是一次性上传多张图片,而是一张图片,一个名字的方式来添加。
在开发过程中,我发现,如果用上述方法去绑定控件,那么getFieldValue("name")只会保存最后一次输入的值,那么这样肯定不符合需求。解决方案如下:
方案1:
{getFieldDecorator(`name${k}`, {})(
<Input/>
)}
其中k是索引,因为要动态添加控件,所以会使用map遍历这个页面的state,相当于去监听这个state,k即使遍历时的下标,这样在控制台打印出来的值会是这样:
name0:"111"
name1:"222"
image0"https://ifp-test.oss-cn-shenzhen.aliyuncs.com"
image1:"https//ifp-test..."
可以看到,这中方法依旧是以一个控件绑定一个key,通过循环可以获取所有控件的值。
方案2:
{getFieldDecorator(`name[${k}]`, {})(
<Input/>
)}
细心的小伙伴可以看到,key值的字符串我用方括号将索引包了起来,看起来像个数组。没错!就是数组,这样说来可能还不能理解,那么我们看看打印出来的结果:
name:["111","222"]
image:["http://...","http://..."]
看,多么神奇,关键是在使用 getFieldDecorator(`name[${k}]`)
的时候,方括号和其他字符串一样,不会变色!!让人感觉和普通字符一样,但Ant Design就是这么神奇,把他当数组处理了,不知道这是不是bug,反正这种方法比方法1要好,可以一次性获取所有的值,用下标索引就可以匹配图片和文字。
Ant Design中getFieldDecorator方法的特殊用法(小bug)的更多相关文章
- 小娱乐一下,fileInfo中的Name ,FullName的用法小BUG
var filePath = new FileInfo(@"c:\text(sdf\123).txt"); Console.WriteLine(filePath.Name); Co ...
- Ant Design中根据用户交互展示不同的标签
Ant Design中根据用户交互展示不同的标签 Ant Design使用的是React框架,那么我们先看代码: <Fragment> <a onClick={() => th ...
- 关于Jquery中ajax方法data参数用法的总结
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
- java中equals方法和==的用法
java中equals方法的用法以及==的用法(参考一)equals 方法是 java.lang.Object 类的方法.两种用法说明:(1对于字符串变量来说,使用“==”和“equals()”方法比 ...
- ant design 中实现表格头部可删除和添加
我是用antd pro做一个项目.有一个小需求是表格头部栏可操作.具体是表头的每一项都带一个"x"按钮,当不想展示这一栏的时候,直接点"x",这一栏就不展示了. ...
- 【转】关于Jquery中ajax方法data参数用法的总结
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Bosto ...
- Ant Design中的Form组件
1. 使用Form.create()包裹过的组件可以获取到this.props.form属性 Form.create()(Comp) 2. getFieldDecorator() // 在表单中的使用 ...
- ant design 中的 Select 组件常规写法
1.代码 import { Select, Spin } from 'antd'; const Option = Select.Option; <Select allowClear showSe ...
- 空 Maven项目转成 Web项目 & SpringMVC调用其他 Module中的方法可能会遇到的小问题
SpringMVC调用其他 模块内的方法的 坑 下次别在阴沟里翻船啦.. 一共花费 4个小时,解决项目中的这个问题 OMG 1. 首先是 Maven新建工程 一般使用 Maven都是先创建 空工程 当 ...
随机推荐
- 【原生JS】层叠轮播图
又是轮播?没错,换个样式玩轮播. HTML: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- pip安装软件包报Could not fetch URL
报这个错误的原因是python.org已经不支持TLSv1.0和TLSv1.1了.更新pip可以解决这个问题,但是你不能用命令 pip install --upgrade pip 做更新,因为TLS证 ...
- C#的类
一.String类 1.Length 字符的长度 string x = Console.ReadLine();int i = x.Length;// Length 是获取字符串的长度(从1开始数)Co ...
- C# 强转会不会抛出异常
最近遇到一个小伙伴问我,从一个很大的数强转,会不会抛出异常.实际上不会出现异常 最简单的代码是使用一个比 maxvalue 大的数,然后用它强转 long tathkDucmmsc = int.Max ...
- P1061 最长连号
题目描述 输入n个正整数,(1<=n<=10000),要求输出最长的连号的长度.(连号指从小到大连续自然数) 输入格式 第一行,一个数n; 第二行,n个正整数,之间用空格隔开. 输出格式 ...
- P1037 最小公倍数
题目描述 给你两个正整数A和B,求它们的最小公倍数. 输入格式 两个正整数 \(A,B(1 \le A,B \le 10^9)\) . 输出格式 一个整数,表示A和B的最小公倍数. 样例输入 6 8 ...
- ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理(16)之轻博客
源码下载地址:http://www.yealuo.com/Sccnn/Detail?KeyValue=c891ffae-7441-4afb-9a75-c5fe000e3d1c 项目到上面一步其实已经算 ...
- WPF 使用 SharpDx 异步渲染
本文告诉大家如何通过 SharpDx 进行异步渲染,但是因为在 WPF 是需要使用 D3DImage 画出来,所以渲染只是画出图片,最后的显示还是需要 WPF 在他自己的主线程渲染 本文是一个系列,希 ...
- POJ 2253 Frogger(SPFA运用)
Description Freddy Frog is sitting on a stone in the middle of a lake. Suddenly he notices Fiona Fro ...
- 【GYM102091】2018-2019 ACM-ICPC, Asia Nakhon Pathom Regional Contest
A-Evolution Game 题目大意:有$n$个不同的野兽,定义第$i$ 个野兽有 $i$ 个眼睛和 $h[i]$ 个角,你可以任意从中选择一个野兽进行进化,每次进化角数量必须增加,而且进化后要 ...