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要好，可以一次性获取所有的值，用下标索引就可以匹配图片和文字。