Как создавать формы с помощью библиотеки Formik в React
2026-02-26 18:35 Diff
https://ru.hexlet.io/blog/posts/formik-v-react

Рассказываем, как работает библиотека Formik для создания форм в React и почему мы рекомендуем ее использовать.

Эта статья больше подходит для тех, кто уже немного знает основы JS. Если вы еще не разобрались с ним, советуем перед прочтением пройти большую профессию по JavaScript на Хекслете.

Содержание

Что такое Formik

Formik — это легкая, бесплатная библиотека с открытым исходным кодом для React или React Native, которая решает три основные задачи при создании форм:

  • Управление состоянием формы
  • Валидация формы
  • Отправка формы.

Библиотеку Formik написал директор по инструментам и платформам для разработчиков компании Vercel Джаред Палмер во время создания большой внутренней административной панели. Основная задача состояла в том, чтобы стандартизировать не только все формы, но и то, как через них проходят данные, что значительно упростило бы тестирование, рефакторинг и анализ этих форм.

Почему стоит использовать Formik

Создание формы только на React требует от разработчика самостоятельно написать каждую часть процесса: от настройки состояния до отправки формы. Программисту нужно будет учесть, что:

  • Нужно хранить и отслеживать значения полей формы, ошибки и статус валидации каждого поля
  • Потребуется обрабатывать ввод пользователя и менять состояние формы
  • Необходимо продумать и самостоятельно описать валидации
  • Нужно описать процесс отправки формы

Formik берет на себя все вышеперечисленные заботы и предоставляет ряд компонентов и хуков для создания форм в React и React Native. Далее в статье мы познакомимся с основными компонентами этой библиотеки: <Formik />, <Form />, <Field /> и <ErrorMessage />.

Как управлять состоянием формы в Formik

Для того, чтобы начать работать с Formik, достаточно обернуть форму в компонент <Formik />:

С помощью пропса initialValues мы инициализируем начальное состояние формы внутри Formik. При этом для того, чтобы получать значения и обновлять состояние полей формы, можно воспользоваться компонентом <Field /> вместо обычного HTML-элемента <input />. Этот компонент будет самостоятельно синхронизировать состояние, и нам не потребуется передавать через пропсы value и onChange:

У Formik есть собственный метод handleChange, который можно использовать для обновления состояния при пользовательском вводе данных в поля формы. Таким образом отпадает необходимость реализовывать собственный метод handleChange. В примере ниже метод handleChange обновляет значения поля email в состоянии формы на основании атрибута name, если в этом поле будут изменения:

Метод handleChange используется с input-элементами, а компонент <Field> самостоятельно обновляет значения без необходимости реализации метода handleChange.

Читайте также:

Маршрутизация в React Router: как она работает и почему ее выбирают разработчики

Валидация и сообщения об ошибках в Formik

Валидация очень важна при создании форм. Если формы правильно не обрабатываются, это может привести к большому количеству ошибок. Формы должны сообщать пользователям, какие поля являются обязательными и какие типы значений разрешены в определенных полях. Это также помогает дать пользователям четкое представление о том, что не так с их вводом.

Валидация в Formik выполняется автоматически во время определенных событий, такие как ввод данных пользователем, изменение фокуса и отправка. При этом Formik поддерживает валидацию как на уровне формы, так и на уровне поля. Все, что нужно сделать, это передать функцию проверки в компонент <Formik /> или <Field /> через проп validate:

Как показать сообщения об ошибках в Formik

Formik предоставляет компонент <ErrorMessage /> для автоматического отображения сообщений об ошибках для компонента <Field /> с соответствующим именем (name).

<ErrorMessage /> через свойство component позволяет указать, какой HTML-тег будет отображаться:

Валидация с помощью Yup

Как мы говорили выше, Formik поддерживает валидацию как на уровне формы, так и на уровне поля, и за разработчиком остается право написать свою реализацию валидации. Однако можно пойти дальше и воспользоваться возможностью связать Formik c Yup.

Yup — это библиотека для валидации объектов JS. Она позволяет описать схему валидации объекта, где для каждого свойства объекта устанавливается ряд ограничений, и далее на этом объекте вызывается метод валидации validate.

Formik предоставляет поддержку схем валидации validationSchema в Yup — она автоматически преобразует ошибки валидации из Yup в объект, ключи которого соответствуют значениям полей формы.

Читайте также:

Как деплоить приложение на Railway. Гайд для фронтендеров и бэкендеров

Для того, чтобы добавить Yup в проект, нужно установить его из npm:

Отправка формы в Formik

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

В примере ниже функция onSubmit вызывается при отправке формы и использует функцию setSubmitting для обновления состояния компонента Formik в процессе отправки.

Заключение

Formik является одной из тех библиотек с открытым исходным кодом, которая необходима, если вы пишете много форм в своем приложении на React. Она делает процесс создания формы относительно быстрым и интуитивно понятным, особенно при создании сложных форм.

В этой статье мы рассмотрели основные возможности библиотеки. Если вы хотите узнать больше о Formik, то дополнительную информацию можно найти в официальной документации библиотеки.

Станьте профессиональным фронтенд-разработчиком с нуля за 10 месяцев

На Хекслете есть профессия «Фронтенд-разработчик». Пройдите ее, чтобы изучить один из самых известных языков программирования, освоить популярные фреймворки и создать большое портфолио с проектами на GitHub.