Formik: регистрация формы в React

Фрагмент кода React в редакторе

Formik — это библиотека для управления формами, предоставляющая компоненты и хуки, которые упрощают создание форм в React. Formik управляет состоянием формы, валидацией и обработкой ошибок, позволяя сосредоточиться на логике и UX.

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

Создание React-приложения

Используйте create-react-app для создания нового проекта React:

npx create-react-app formik-form

Далее перейдите в папку formik-form/src и удалите все файлы, кроме App.js.

Создайте новый файл Register.js — в нём будет находиться ваша форма. Не забудьте импортировать компонент в App.js.

Контролируемые и неконтролируемые компоненты

Формы в React можно реализовать либо как контролируемые, либо как неконтролируемые компоненты. Контролируемый компонент передаёт данные формы в состояние React, что даёт полный контроль над значениями. Неконтролируемый компонент полагается на DOM для хранения значений.

Официальная документация React рекомендует контролируемые компоненты. Ниже пример простого контролируемого компонента (состояние и обработчики по каждому полю):

import { useState } from "react";  
const Register = () => {  
  const [email, setemail] = useState("");  
  const [password, setpassword] = useState("");  
  const handleSubmit = (event) => {  
    event.preventDefault();  
    console.log(email);  
  };  
  const handleEmail = (event) => {  
    setemail(event.target.value);  
  };  
  const handlePassword = (event) => {  
    setpassword(event.target.value);  
  };  
  return (  
      
        
        
        
      
  );  
};  
export default Register;

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

Установка Formik

Установите formik в проект через npm:

npm install formik

Для интеграции мы используем хук useFormik. В файле Register.js импортируйте useFormik:

import { useFormik } from "formik"

Инициализация формы с useFormik

Первый шаг — задать начальные значения полей. В нашем примере это email и password.

const formik = useFormik({  
    initialValues: {  
        email: "",  
        password: "",  
    },  
    onSubmit: values => {  
// handle form submission  
    },  
});

onSubmit принимает объект values и отвечает за отправку данных (например, создание пользователя на сервере).

Далее используйте объект formik для синхронизации значений полей с состоянием:

Краткие объяснения по коду выше:

id и name у полей должны совпадать с ключами в initialValues.
Значение поля берётся из formik.values.
formik.handleChange обновляет состояние при вводе.
formik.handleBlur отмечает поле как посещённое (touched).
formik.handleSubmit привязан к событию onSubmit формы.

Добавление ручной валидации

Валидация гарантирует, что вы сохраняете только корректные данные. Можно проверить формат email и длину пароля.

Создайте функцию validate, которая принимает values и возвращает объект ошибок. Если подключить validate к useFormik, ошибки будут доступны в formik.errors по имени поля.

const formik = useFormik({  
    initialValues: {  
        email: "",  
        password: "",  
    },  
    validate: () => {  
        const errors = {};  
        console.log(errors)  
        if (!formik.values.email) {  
        errors.email = "Required";  
        } else if (  
        /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(formik.values.email)  
        ) {  
        errors.email = "Invalid email address";  
        }  
        if (!formik.values.password) {  
        errors.password = "Required";  
        } else if (formik.values.password.length < 8) {  
        errors.password = "Must be 8 characters or more";  
        }  
        return errors;  
    },  
    onSubmit: (values) => {  
        console.log("submitted!");  
// handle submission  
    },  
});

Важно: в ручной функции валидации нужно аккуратно работать с formik.values или использовать параметр values из сигнатуры validate — это помогает избежать замыкания на устаревших значениях.

Отображение ошибок

Чтобы показывать ошибки только после посещения поля, используйте formik.touched вместе с formik.errors:

  
      
    {formik.touched.email && formik.errors.email ? {formik.errors.email} : null}  
      
    {formik.touched.password && formik.errors.password ? {formik.errors.password} : null}

Валидация через Yup

Formik удобно интегрируется с библиотекой Yup, которая упрощает создание схем валидации.

Установите yup:

npm install yup

Импортируйте Yup:

import * as Yup from "yup"

Пример использования схемы валидации через validationSchema:

const formik = useFormik({  
    initialValues: {  
        email: "",  
        password: "",  
    },  
    validationSchema: Yup.object().shape({  
        email: Yup.string()  
        .email("Invalid email address")  
        .required("Required"),  
        password: Yup.string()  
        .min(8, "Must be 8 characters or more")  
        .required("Required")  
    }),  
    onSubmit: (values) => {  
        console.log("submitted!");  
// handle submission  
    },  
});

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

Практические советы и UX

Валидируйте минимально критичные вещи при вводе (например формат email), а комплексные проверки делайте на submit или на бэкенде.
Показывайте ошибки рядом с полем и используйте aria-атрибуты для доступности.
Не блокируйте UX слишком строгой валидацией во время ввода: дайте пользователю возможность редактировать.

Важно: всегда дублируйте валидацию на серверной стороне.

Когда Formik может не подойти

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

Альтернативы

React Hook Form — более лёгкая и производительная альтернатива для больших форм; использует рефы и минимизирует перерисовки.
Final Form / React Final Form — зрелая библиотека с мощными возможностями.
Самописные решения для очень простых сценариев.

Быстрая памятка (cheat sheet)

Установка: npm install formik
Импорт: import { useFormik } from “formik”
Инициализация: const formik = useFormik({ initialValues, onSubmit, validate/validationSchema })
В input: name/id совпадает с ключом initialValues; value — formik.values[name]; onChange — formik.handleChange; onBlur — formik.handleBlur
Ошибки: formik.touched[name] && formik.errors[name]

Чек-листы для ролей

Разработчик:

Проверить соответствие name/id в initialValues
Настроить onSubmit и обработку ошибок сервера
Добавить aria-атрибуты для доступности

QA:

Проверить валидацию клиент-сайда и сервисную валидацию
Проверить поведение при потере связи с сервером
Протестировать сценарии граничных значений полей

Продукт/UX:

Убедиться, что сообщения об ошибке понятны пользователю
Проверить удобство заполнения на мобильных и настольных устройствах

Критерии приёмки

Форма отправляет корректный payload при валидных данных
Невалидные данные показывают понятные ошибки рядом с полями
Форма не теряет введённые данные при неудачной отправке (предвиденная бизнес-логика)
Доступность: экранные читалки видят поля и ошибки

Тестовые случаи (примеры)

Успешная отправка с корректным email и паролем >= 8 символов
Ошибка при пустом email
Ошибка при неверном формате email
Ошибка при пароле менее 8 символов
Поведение при обрыве сети во время отправки

Короткий глоссарий

Formik: библиотека для управления состоянием форм и валидацией в React
useFormik: хук для инициализации и управления формой
initialValues: начальные значения полей формы
validationSchema: схема валидации (обычно Yup)
touched: флаги посещённых полей
errors: объект с ошибками валидации

Итог

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

Примечание: не забывайте повторно проверять данные на сервере — клиентская валидация улучшает UX, но не заменяет серверную безопасность.