> Как реализовать динамическое добавление полей в формах с помощью Formik (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: ДиджиталСектор

Стек: React

> Пример ответа

Для реализации динамического добавления полей в Formik используется компонент FieldArray. Вот пример добавления полей для списка телефонов:

JSX
import { Formik, Form, Field, FieldArray } from 'formik';

function PhoneForm() {
  return (
    <Formik
      initialValues={{ phones: [''] }}
      onSubmit={values => console.log(values)}
    >
      {({ values }) => (
        <Form>
          <FieldArray name="phones">
            {({ push, remove }) => (
              <div>
                {values.phones.map((phone, index) => (
                  <div key={index}>
                    <Field name={`phones.${index}`} placeholder="Телефон" />
                    <button type="button" onClick={() => remove(index)}>
                      Удалить
                    </button>
                  </div>
                ))}
                <button type="button" onClick={() => push('')}>
                  Добавить телефон
                </button>
              </div>
            )}
          </FieldArray>
          <button type="submit">Отправить</button>
        </Form>
      )}
    </Formik>
  );
}

Ключевые моменты:

FieldArray предоставляет методы push, remove, insert для управления массивом полей
Имена полей задаются через индекс: phones.0, phones.1 и т.д.
Для сложных объектов используйте вложенные пути: contacts.${index}.name
Начальное значение массива задаётся в initialValues
Можно комбинировать с валидацией через Yup, используя yup.array().of(...)