Як обробляти форми в React за допомогою Formik

Обробка форм у React – це як особистий міні-проект: варто трохи зазіватися, і весь фронт може почати вередувати. У поєднанні з JavaScript, де кожен стан доводиться тримати під контролем, завдання ускладнюється. І тут на сцену виходить Formik – бібліотека, яка бере на себе всю рутину. Якщо тобі набридло постійно прописувати ручні обробники, перевіряти дані та скидати стани, то давай разом розберемося, як formik для форм у react допомагає навести лад.

А почати кар’єру фронтенд-розробника ти можеш на курсах FoxmindEd.

Навіщо використовувати Formik у React?

Скажемо чесно, react обробка форм – це як будувати будинок без креслень. Тобі треба контролювати все: відстежувати зміни, оновлювати стани, робити валідацію… Потрібен зайвий код, і шанси “нафейлити” програму злітають. Formik же створений спеціально для роботи з формами і дає змогу значно спростити код. Він підтримує зручні хуки і компоненти, які роблять процес практично “безболісним” і навіть захопливим.

Основні проблеми під час роботи з формами в React

Якщо колись намагався написати форму без Formik, то знаєш усі ці підводні камені. Валідація форм у React може стати справжнім кошмаром, особливо якщо потрібно додати складні перевірки на льоту. Або ті ж самі помилки під час введення даних: один маленький “нафейлив” стан – і форма перестає працювати. Formik допомагає уникнути цих “милиць”, полегшуючи код і забезпечуючи гнучкість.

Як налаштувати Formik у React

Тепер перейдемо до справи: як використовувати formik у React і змусити його працювати на нас.

Встановлення Formik у проєкт

Встановити можна за пару секунд, використовуючи npm або yarn:

npm install formik

Після цього ти можеш одразу його імпортувати у свій компонент і використовувати його хуки та компоненти. Тож, можна вважати, половину роботи вже зроблено.

Основні компоненти Formik

Бібліотека постачається з набором компонентів, які спрощують роботу. Наприклад:

• Formik – головний компонент, який обертає всю форму.
• Field – обробляє input-поля і стежить за їхніми значеннями.
• ErrorMessage – компонент для відображення помилок валідації. З ним не потрібно писати зайвий код для керування відображенням помилок.

Створення форм з formik: крок за кроком

Приклад простого компонента форми

Почнемо зі створення базового компонента, де бібліотека контролюватиме поля і надсилання даних:

import { Formik, Form, Field, ErrorMessage } from 'formik';

const MyForm = () => (

  <Formik

    initialValues={{ name: '', email: '' }}

    onSubmit={(values) => {

      alert(JSON.stringify(values, null, 2));

    }}

  >

    <Form>

      <Field name="name" type="text" placeholder="Your name" />

      <ErrorMessage name="name" component="div" />

      <Field name="email" type="email" placeholder="Your mail" />

      <ErrorMessage name="email" component="div" />

      <button type="submit">Send</button>

    </Form>

  </Formik>

);

Ось і все! Використовуючи Field і ErrorMessage, ми позбуваємося ручної роботи з відстеження даних і обробки помилок.

FoxmindEd – це навчальний центр, що має велику різноманітність напрямків курсів для новачків та програмістів з досвідом!

Тільки починаєте свій шлях в ІТ? Спробуйте курси Start

Вже маєте базові навички програмування? Тоді
курси Junior саме для вас.

Хочете поглибити свої знання в ІТ? Ми маємо курси Middle/Senior

Керування станом форми

Бібліотека автоматично відстежує стан кожного поля, що означає, що нам не потрібно вручну прописувати useState для кожного інпута. Форму можна скинути, використовуючи метод resetForm, що корисно після успішного надсилання даних.

Валідація даних у Formik

Він підтримує просту валідацію, і для складних перевірок можна використовувати Yup. Ось приклад налаштування валідації:

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({

  name: Yup.string().required('Name required'),

  email: Yup.string().email('Incorrect email').required('Email required'),

});

Валідацію тут під’єднують як параметр validationSchema, і бібліотека оброблятиме всі перевірки.

Приклади та практики роботи з Formik

Приклад форми з кількома полями

Якщо потрібно додати більше полів, просто додавай їх через Field і налаштовуй валідацію через Yup. Весь процес залишається таким самим, а код залишається чистим.

Надсилання даних форми

Бібліотека також дає змогу легко налаштувати надсилання даних форми через метод onSubmit, де можна, наприклад, надіслати запит на сервер. Це дає змогу уникнути зайвого коду та робить структуру застосунку зрозумілішою.

Як керувати формами в React за допомогою Formik

Керування формами в react вимагає продуманого підходу, але ця бібліотека позбавляє нас багатьох деталей. Давайте обговоримо, як керувати станом і обробляти помилки.

Керування станом і змінами даних

Бібліотека надає методи handleChange і handleBlur, що дає змогу відстежувати зміни даних і правильно реагувати на зміни в кожному інпуті. Це зручно, якщо ти хочеш, наприклад, показувати підказки або попередження під час введення даних.

Обробка помилок і повідомлень

Для відображення повідомлень про помилки можна використовувати компонент ErrorMessage або писати власні умови залежно від полів. Наприклад, якщо поле порожнє або email не підходить, бібліотека автоматично виводить повідомлення – потрібно тільки правильно налаштувати валідацію.

Висновок

Тепер, створення форм з formik стане простим і зрозумілим процесом, і навіть якщо “нафейлити” щось вийде, виправити це буде значно легше. Адже бібліотека бере на себе всю рутину, даючи змогу зосередитися на тому, що справді важливо – створенні зручного інтерфейсу та обробці даних.