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

  • 相关阅读:
    JAVA使用POI操作excel
    Weblogic部署项目三种方式
    Linux(centeros)安装weblogic10.3.6教程
    Linux下安装tomcat
    Linux下安装mysql数据库
    Linux(centeros)下安装jdk
    策略模式场景举例
    velocity整合servlet
    'sessionFactory' or 'hibernateTemplate' is required解决方法
    转!数据库连接池概念、种类、配置(DBCPC3P0JndI与Tomact配置连接池)
  • 原文地址:https://www.cnblogs.com/tian874540961/p/10438800.html
Copyright © 2011-2022 走看看