Форма для обработки состояния с массивом объектов

#reactjs #forms #formik

Вопрос:

Я недавно использовал библиотеку Formik для форм, и я столкнулся с проблемой. Я не уверен, как я могу обрабатывать состояние с массивом объектов внутри компонента. Я знаю о setValues методах и setFieldValue методах.. также о FieldArray том, но моя цель-добавить новую зону в массив новых зон, когда я нажимаю кнопку добавить, и я не хочу ее отображать. Я хочу настроить рендеринг и разместить его под аккордеоном.

песочница здесь: https://codesandbox.io/s/rough-haze-zdlw9?file=/src/App.js

Понадобятся ли мне все пользовательские обработчики? Нужно ли мне использовать локальное состояние внутри компонента, а затем использовать setFieldValue для установки состояния? Или я могу как-то использовать FieldArray там без рендеринга?

Спасибо

Ответ №1:

Вы используете компоненты React-Bootstrap вместо компонентов Formik, поэтому вы должны вручную назначить handleChange и value реквизиты каждому входному компоненту. Вы также должны позвонить setFieldValue() , когда пользователь нажимает кнопку Добавить.

Пример:

https://codesandbox.io/s/quirky-leaf-tr3rv