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