antd 動態新增/刪除Form

* 前言

在寫項目遇到動態新增一整個form表單的需求，當時還遇到坑了，沒有get到正確的姿式，因此解決問題就想着寫這個文章記錄一下。
簡易版在線demo:https://stackblitz.com/edit/react-x435fn?embed=1&file=index.js

* 需求

由於form裏面的數據還須要正則校驗之類的，爲了方便，因此打算使用antd的form來寫。
form經過數據遍歷出來，每一個form均可以刪除，也能夠新增form。
最終實現效果如圖：

* 問題與解決

1. 如何保存數據？

當刪除一個form時，form中刪除的數據出錯。並且，每一個form的數據還須要函數二次處理。

解決：當時getFieldDecorator的寫法不是很正確，應該按照下圖這麼寫 getFieldDecorator(content[${index}].source)
這樣就把每一個form的數據保存在對應的content[index]中，而且form裏每項的數據格式也對應了(content[index].xx)。

arr.map((item,index)=>(
    <div className={styles.content} key={index}>
    <Icon type="close" className={styles.close} onClick={deleteContent.bind(this,index)}/>
    <Form {...formItemLayout}>
        <Form.Item style={{ width: '50%' }} label="xxx">
            {getFieldDecorator(`content[${index}].source`, {
            initialValue: item.source,
            rules: [],
            })(<Input placeholder="xxx" />)}
        </Form.Item>
...

1. 如何刪除form？

這樣解決了正確在遍歷出來的form裏存儲數據的問題，如今要以前刪除form以後，數據出錯的問題。其實有了上面的修改，這步就簡單多了。
一、使用form提供的api getFieldValue 獲取到整個content數據
二、setFieldsValue，能夠設置form的值。使用filter把要刪除的數據過濾掉
三、把arr裏的要刪除的form也刪掉，由於form是經過arr遍歷出來的。arr.splice(index,1)

const deleteContent = (index)=>{
        confirm({
            title: '肯定要刪除嗎?',
            onOk() {
                const content = form.getFieldValue('content');
                form.setFieldsValue({
                  content: content.filter((item, key) => key !== index),
                });
                arr.splice(index,1)
                dispatch({
                    type: 'xxx/updateStates',
                    payload: {
                        arr
                    }
                })
            },
            onCancel() {},
          });
    }

* 結語

好了，寫到這裏就結束了。但願有幫到你們，這裏最主要的是若是使用數據來遍歷form，就最好把getFieldDecorator寫成這種格式dataName[${index}].xx