javascript - 如何创建动态字段的 Ant Design 组

Question

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

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

设想

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

标签： javascriptdynamicantd

Answer 1

是的，可以使用 ant design 动态表单组件创建嵌套的动态表单。我也问过同样的问题如何使用 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创建了一个工作演示。