Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

3 </blockquote><h2>Содержание</h2>

4 <ul><li><a>Что такое Formik</a></li>

5 <li><a>Почему стоит использовать Formik</a></li>

6 <li><a>Как управлять состоянием формы в Formik</a></li>

7 <li><a>Валидация и сообщения об ошибках в Formik</a></li>

8 <li><a>Как показать сообщения об ошибках в Formik</a></li>

9 <li><a>Валидация с помощью Yup</a></li>

10 <li><a>Отправка формы в Formik</a></li>

11 <li><a>Заключение</a></li>

12 </ul><h2>Что такое Formik</h2>

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

14 <ul><li>Управление состоянием формы</li>

15 <li>Валидация формы</li>

16 <li>Отправка формы.</li>

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

18 <h2>Почему стоит использовать Formik</h2>

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

20 <ul><li>Нужно хранить и отслеживать значения полей формы, ошибки и статус валидации каждого поля</li>

21 <li>Потребуется обрабатывать ввод пользователя и менять состояние формы</li>

22 <li>Необходимо продумать и самостоятельно описать валидации</li>

23 <li>Нужно описать процесс отправки формы</li>

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

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

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

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

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

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

30 <blockquote><h3>Читайте также:</h3>

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

32 </blockquote><h2>Валидация и сообщения об ошибках в Formik</h2>

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

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

35 <h2>Как показать сообщения об ошибках в Formik</h2>

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

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

38 <h2>Валидация с помощью Yup</h2>

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

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

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

42 <blockquote><h3>Читайте также:</h3>

43 <p>Как деплоить приложение на Railway.<a>Гайд для фронтендеров и бэкендеров</a></p>

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

45 <h2>Отправка формы в Formik</h2>

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

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

48 <h2>Заключение</h2>

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

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

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

52 <p>На Хекслете есть профессия<a>"Фронтенд-разработчик"</a>. Пройдите ее, чтобы изучить один из самых известных языков программирования, освоить популярные фреймворки и создать большое портфолио с проектами на GitHub.</p>

53 </blockquote>