我不知道應該怎麼描述這個功能才算清晰，看圖吧

環境是在antd的Form元件內開發大概的功能如下：

• 使用者需要選擇異常情況通知方式，並填寫最少一個最多三個的聯絡人姓名和聯絡方式。

• 期望使用者點選加號，可以增加一條，最多三條。

• 內容需校驗，輸入不能為空，聯絡方式需要根據使用者勾選的通知方式校驗輸入內容，即使用者勾選簡訊時，聯絡方式校驗規則為手機號，勾選郵件時，校驗方式為郵箱。

• 輸入部分的資料結構應為陣列，資料展示時可以通過遍歷陣列方便資料展示。並且聯絡人稱呼和聯絡方式存在對應關係。

一言不合上程式碼

元件部分

<FormItem
            {...formItemLayout}
            label="異常情況通知"
 

          >{getFieldDecorator('contactType', {
            initialValue: data.contactType,
            rules: [{
              required: true,
              message: '訂單訊息通知至少選擇一個渠道！',
            }],
          })(
            <Radio.Group onChange={e => oncontactType(e)} disabled={!data.informWay}>
              <Radio
 
 value="0">簡訊</Radio>
              <Radio value="1">郵件</Radio>
            </Radio.Group>,
            )}
          </FormItem>
          <FormItem
            {...submitFormLayout}
          >
            <div className="informWay" >
              { data.informWay && data.informWay.map((element, index) => (
                <span
 
 key={index}>
                  <FormItem>
                    {getFieldDecorator(`man${index}`, {
                      initialValue: element.name,
                      rules: [{
                        required: true,
                        message: '請輸入聯絡人稱呼!',
                      }],
                    })(
                      <Input placeholder="請輸入聯絡人稱呼" />,
                      )}
                  </FormItem>
                  <FormItem>
                    {getFieldDecorator(`link${index}`, {
                      initialValue: element.link,
                      rules: [{
                        required: true,
                        message: '請輸入聯絡方式!',
                      }, {
                        pattern: contactType === '0' ? /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/ : /^[a-zA-Z0-9_.-][email protected][a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                        message: contactType === '0' ? '手機號碼格式錯誤！' : '郵箱格式錯誤',
                      }],
                    })(
                      <Input placeholder="請輸入聯絡方式" />,
                      )}
                  </FormItem>
                  {index < 2 && <Button shape="circle" size="small" icon="plus" type="primary" onClick={() => onLinkWay(index, 'add')} />}
                  {index > 0 && <Button shape="circle" size="small" icon="minus" type="default" onClick={() => onLinkWay(index, 'minus')} />}
                </span>
              ))}
            </div>
          </FormItem>

資料拼接部分

    validateFields((err, values) => {
      // 用新的物件承載提交的資料
      const abc = {
        ...values,
        informWay: [],
      };
      const arr = []; // 儲存輸入框內的值
      const arrD = []; // 儲存key值
      const test = /^(link)|(man)\d$/;
      // 拿到異常通知相關輸入的所有值
      if (!err) {
        // eslint-disable-next-line
        for (const key in abc) {
          if (test.test(key)) {
            arr.push(abc[key]);
            arrD.push(key);
          }
        }
        // 進行資料拼裝
        const arr1 = arr.map((ele, i, a) => {
          if (i % 2 === 0) {
            const obj = {};
            obj.contactName = ele;
            obj.contactWay = a[i + 1];
            return obj;
          }
          return null;
        }).filter(ele => ele !== null);
        abc.informWay = arr1;
        arrD.forEach(ele => delete abc[ele]); // 刪除多餘鍵值對
        onSubmit(abc);
      }
    });

看一下最終的效果

最後貼一下元件的資料結構吧

informWay:[
{contactName:'',contactWay:''},
{contactName:'',contactWay:''},
]