如何创建动态字段的 Ant Design 组答案

【问题标题】：How to Create Ant Design group of Dynamic fields如何创建动态字段的 Ant Design 组
【发布时间】：2018-09-24 15:40:39
【问题描述】：

我正在使用ant design dynamic form。我想如何创建一组动态表单

代码：https://codesandbox.io/s/vvl2yxqr5l

场景

用户需要动态输入团队名称和团队成员名称。是否可以通过蚂蚁设计在动态字段内添加动态字段。

【问题讨论】：

标签： javascript dynamic antd

【解决方案1】：

是的，可以使用 ant design 动态表单组件创建嵌套的动态表单。我也问过同样的问题How to create a questionnaire type form using Ant Design?。您需要添加自己的逻辑，但我在这里提供基本结构：

要删除团队名称：

remove = k => {
    const { form } = this.props;
    const keys = form.getFieldValue("newkeys");
    form.setFieldsValue({
      newkeys: keys.filter(key => key !== k)
    });
};

添加团队名称：

add = () => {
    const { form } = this.props;
    const keys = form.getFieldValue("newkeys");
    const nextKeys = keys.concat(uuid);
    uuid++;
    form.setFieldsValue({
      newkeys: nextKeys
    });
};

移除团队成员：

remove1 = (k, l) => {
    const { form } = this.props;
    const keys = form.getFieldValue("answerkey" + k);
    let newkeys = [];
    if (keys) {
      newkeys = keys;
    } else {
      newkeys = [];
    }
    form.setFieldsValue({
      ["answerkey" + k]: newkeys.filter(key => key !== l)
    });
};

添加团队成员：

add1 = index => {
    const { form } = this.props;
    const keys = form.getFieldValue("answerkey" + index);
    let newkeys = [];
    if (keys) {
      newkeys = keys;
    } else {
      newkeys = [];
    }
    const nextKeys = newkeys.concat(uuid1);
    uuid1++;
    form.setFieldsValue({
      ["answerkey" + index]: nextKeys
    });
};

我在codesandbox.io 上创建了一个工作演示。

【讨论】：

谢谢！！但它显示Type Error: Object doesn't support property or method 'removeAttribute' 而团队名称
@Selvin 好的。我只检查谷歌浏览器。不知道 IE 11。
如果我有两个回答字段。我如何获得价值？同样的问题也在这里演示代码codesandbox.io/s/mql8o91opx
@Selvin 您需要使用动态键来获取值。
该代码不再有效，因为它使用的是 antd 3.x。在 Package.js 上更改为 antd 3.x 可以修复它。

【解决方案2】：

从上面的答案中，我尝试使用 remove() 函数删除团队名称，但遇到了一些问题，我发现了这个

使用 map 而不是循环，因为 map 在 render() 之后的第 7 行带来值

newkeys.map((i) => {
    getFieldDecorator("answerkey" + i, { initialValue: [] });
})

Demo video

【讨论】：