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

上一篇:使用react中antd design UI库from中的getFieldsValue,getFieldValue,validateFields,resetFields,getFieldDecorat


下一篇:react + antd Form表单校验