Как создать группу Ant Design из динамических полей

Question

Я использую Муравей дизайн динамическая форма .Как я предполагаю создать группу динамических форм

Код: https://codesandbox.io/s/vvl2yxqr5l

Сценарий

Пользователю необходимо ввести имя команды и членов командыимя динамически.Можно ли добавить динамические поля внутри динамического поля с помощью дизайна муравья.

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 .