Форма со строками, пытающаяся получить значения в виде объекта массива

#antd

#antd

Вопрос:

Я пытаюсь создать форму на основе строк с помощью компонента ant design form. Это будет выглядеть как на скриншоте.

Получение отправленного значения в виде отдельного объекта, как показано на скриншоте (консоль).

введите описание изображения здесь

Есть ли какой-либо простой способ / решение для архивирования его с помощью объекта массива со значениями каждой строки, как показано ниже.

 [{
  receiver_name0: "Jaison 1",
  receiver_email0: "jaison1@gmail.com",
  receiver_phone0: "05555555"
},{
  receiver_name1: "Jaison 2",
  receiver_email1: "jaison2@gmail.com",
  receiver_phone1: "06666666"
}]
  

Заранее спасибо.

Ответ №1:

Предполагая, что вы используете getFieldDecorator предоставленную antd форму, первый аргумент getFieldDecorator — это строка, которая представляет собой путь к месту, где должно быть установлено значение. Это работает почти так же, как Lodash _.set() .

Проверьте это:https://github.com/react-component/form/pull/48

Чтобы задать значения формы в массиве, вы можете попробовать что-то подобное из примера в PR:

 {getFieldDecorator('row[0].receiverName', {})(<input/>)}
{getFieldDecorator('row[1].receiverName', {})(<input/>)}  

и т.д.

Комментарии:

1. Спасибо за ваш повтор и извините за задержку. Я пробовал ваш подход, но безуспешно, было бы неплохо, если бы вы могли создать скрипку для меня. codepen.io/jaison-james/full/BEKBNv

2. @Jaison В чем проблема, с которой вы столкнулись? Ваш codepen в основном работает для меня, за исключением того, что, как ни странно, ничего не регистрируется в консоли codepen, только в консоли браузера.

3. Как упоминалось в OP, я хотел бы получить отправленное значение в виде объекта массива вместо объекта.

4. @Jaison итак, вы просто хотите, чтобы представленный объект верхнего уровня был массивом, а не объектом со names свойством, которое является массивом?

5. Да, не только массив, это должен быть объект массива, как я упоминал в примере. например [{ name: «Jaison 1» },{ name: «Jaison 2» }]