Истоки проблемы
Скорее всего, вы уже не раз сталкивались с формами в веб-разработке. Будь то регистрация, форма обратной связи, вход или, не дай бог, тот монстр из 20 полей для отправки анкеты. А теперь спросите себя: как часто после работы с этими формами вы хотели сжечь клавиатуру, а потом зарыться в землю? Если такой опыт вам знаком, то поздравляю, сегодня мы спасём вас от этих страданий с помощью Formik.
В чём заключаются проблемы работы с формами в React?
Работа с формами в чистом React может быть несколько… трудоёмкой. Представьте, что вам нужно реализовать форму с несколькими полями, обработкой их состояний, валидацией данных и выводом ошибок. Вот кратенький список титанических усилий, которые вам придётся приложить:
Управление состоянием каждого поля. Для каждого инпута нужно отслеживать его значение. Обычно это означает создание множества
useStateили одного громоздкого объекта состояния.Обработка событий. Для каждого поля нужно создавать обработчик событий. Здесь начинаются первые сомнения, а стоит ли вообще продолжать разработку.
Валидация данных. Простая проверка полей, например,
required, может быть терпимой, но как быть с более сложными проверками (например, проверка уникальности username через API)? Здесь часто начинается боль.Обработка ошибок. Как отображать ошибки? Как сохранять их в состоянии компонента? Как не запутаться в их обработке при куче полей?
Кастомизация. Хотите красиво стилизовать ошибки? Добавить кастомное поведение? Создать многошаговую форму? Добро пожаловать в ад, не забудьте упаковать терпение.
Как Formik спасает разработчиков?
Formik — это библиотека, которая берёт на себя всю грязную работу по управлению состоянием форм и их полей, а также по обработке валидации. Давайте разберём основные преимущества, которые вы получите, используя Formik.
1. Управление состоянием формы как искусство
Formik автоматически управляет состоянием всех полей формы. Вам больше не надо вручную создавать десятки useState для каждого поля. Вместо этого вся информация (значения полей, ошибки, статус отправки и т.д.) сосредоточена в одном месте. Это особенно полезно, когда форма становится большой и сложной.
import { useFormik } from 'formik';
const MyForm = () => {
const formik = useFormik({
initialValues: {
email: '',
password: '',
},
onSubmit: (values) => {
console.log('Форма отправлена:', values);
},
});
return (
<form onSubmit={formik.handleSubmit}>
<input
name="email"
value={formik.values.email}
onChange={formik.handleChange}
/>
<input
name="password"
type="password"
value={formik.values.password}
onChange={formik.handleChange}
/>
<button type="submit">Отправить</button>
</form>
);
};2. Валидация без боли
Formik поддерживает интеграцию с Yup — мощной библиотекой для описания схем валидации. Вы можете буквально описать правила валидации в пару строчек, а Formik возьмёт на себя их выполнение и обработку ошибок.
import * as Yup from 'yup';
const validationSchema = Yup.object({
email: Yup.string().email('Неверный формат почты').required('Обязательное поле'),
password: Yup.string().min(6, 'Минимум 6 символов').required('Обязательное поле'),
});Formik автоматически передаст ошибки валидации в удобный формат, с которым легко работать в интерфейсе.
3. Универсальные компоненты для форм
Formik предоставляет несколько удобных компонентов, таких как <Formik>, <Form>, <Field>, которые упрощают создание и управление формой. Это похоже на магию: минимальная конфигурация — и вот у вас готовая форма.
import { Formik, Form, Field } from 'formik';
const MyForm = () => (
<Formik
initialValues={{ email: '', password: '' }}
onSubmit={(values) => console.log('Данные:', values)}
>
{() => (
<Form>
<Field name="email" type="email" />
<Field name="password" type="password" />
<button type="submit">Отправить</button>
</Form>
)}
</Formik>
);Теперь вы видите, что инпуты больше не требуют отдельного состояния. Formik делает это за вас!
Сравнение с нативным React
Для наглядности давайте сравним подходы "чистого React" и Formik при реализации одной и той же формы.
Чистый React (без Formik)
const MyForm = () => {
const [email, setEmail] = React.useState('');
const [password, setPassword] = React.useState('');
const handleSubmit = (event) => {
event.preventDefault();
console.log('Данные:', { email, password });
};
return (
<form onSubmit={handleSubmit}>
<input
name="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
name="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">Отправить</button>
</form>
);
};Formik
import { Formik, Form, Field } from 'formik';
const MyForm = () => (
<Formik
initialValues={{ email: '', password: '' }}
onSubmit={(values) => console.log('Данные:', values)}
>
{() => (
<Form>
<Field name="email" type="email" />
<Field name="password" type="password" />
<button type="submit">Отправить</button>
</Form>
)}
</Formik>
);Как вы можете заметить, Formik значительно снижает объём "ручного труда", а код становится более лаконичным и чистым.
Когда использовать Formik?
Formik лучше всего проявляет себя в следующих сценариях:
- Большие формы. Например, сложные анкеты или многошаговые формы.
- Когда требуется сложная валидация. Поддержка Yup делает процесс создания гибкой валидации очень простым.
- Когда нужно улучшить читаемость кода. Formik предоставляет удобные и понятные API, которые помогают избежать хаоса в вашем коде.
Formik — это не магическое средство, которое автоматически решит все ваши проблемы с формами, но оно значительно упрощает жизнь разработчика, предотвращая распространённые ошибки и снижая объём рутины. В следующих лекциях мы погрузимся в установку, настройку и практическое использование этой библиотеки!
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ