«Ну вот, опять эти формы...» — знакомая мысль? Мы постоянно ищем способ сделать их удобными и предсказуемыми, но идеальное решение все никак не находится. В этой серии статей Артем Леванов, Front Lead в WebRise, подробно разберет, с какими сложностями мы сталкиваемся, изучим разные подходы и в итоге придем к элегантному решению: как описывать все формы на сайте, используя всего по одному компоненту для каждого типа полей.
Проблемы кастомных React форм
Когда разработчик впервые сталкивается с задачей создать форму в React, всё кажется довольно простым: пара input, пара стейтов и обработчик submit.
Но чем больше полей и логики появляется, тем быстрее «игрушечное» решение превращается в гору кода, которую тяжело поддерживать. Вот простая форма логина. Пара input, к ним обработчики useState, перед отправкой запуск валидации. Все логично, просто и понятно.
export const LoginForm = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!email.includes('@')) {
setErrors({ email: 'Некорректный email' });
}
if (password.length < 6) {
setErrors((prev) => ({ ...prev, password: 'Минимум 6 символов' }));
}
};
return (
<form onSubmit={handleSubmit}>
<input
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
{errors.email && <span>{errors.email}</span>}
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
{errors.password && <span>{errors.password}</span>}
<button type="submit">Войти</button>
</form>
);
};Через какое-то время нас попросят сделать форму регистрации, где уже 10-20 полей. Что нам предстоит:
написать для каждого поля свой useState;
написать много if для проверки каждого поля на валидность;
написать для каждого поля свое отображение ошибок.
В итоге файл формы может занимать сотни строк и мы сталкиваемся с очевидными проблемами:
сложно ревьюить такую большую форму;
легко допустить ошибку при написании кода (много однотипных действий и можно забыть например отрендерить ошибку для нового поля);
невозможно быстро обучить новых разработчиков, потому что у каждого своя логика «как писать формы».
Так же, очевидной проблемой будет повторное использование форм. Допустим, у нас есть форма регистрации и форма профиля. Поля вроде «email» и «пароль» в них одинаковые, но код приходится дублировать. В результате:
одно и то же поле реализовано в двух местах;
правила валидации могут различаться;
стили и UX становятся непоследовательными.
Это создает ситуацию, когда одинаковые поля ведут себя по разному и где истина непонятно.
Когда ручной код становится неуправляемым, разработчики ищут способы унификации работы с формами. В целом у нас три пути. Написать собственный велосипед, подключить готовые библиотеки, попытаться найти золотую середину, сочетая библиотеки и собственные слои абстракции. Первая реакция на хаос в коде — это желание спрятать его под универсальный компонент. И это приводит к созданию собственных франкенштейнов. Как пример компонент, который является и простым input, input c маской, селектом, обрабатывает ошибки, видимость поля:
import React from 'react';
import './style.sass';
import InputMask from 'react-input-mask';
export default class Inputs extends React.Component {
render() {
return (
<div className={'inputBlock ' +
(this.props.option_show && 'show ') +
(this.props.required && ' required')}>
{this.props.label &&
<label htmlFor={this.props.id}>{this.props.label}</label>
}
<span className="star">*</span>
{this.props.options &&
<span className="arrowSelect"></span>
}
<InputMask
type={this.props.type || 'text'}
className={'input ' + this.props.className}
style={this.props.style}
name={this.props.name}
value={this.props.value}
placeholder={this.props.placeholder}
id={this.props.id}
onChange={(e) => {
this.props.onChange(this.props.name, e.target.value, this.props.index)
}}
onClick={() => {this.props.options && this.props.onClick()}}
readOnly={this.props.options}
required={this.props.required}
disabled={this.props.disabled}
mask={this.props.mask}
/>
{this.props.options &&
<div className={"options " + (this.props.option_show && 'showOptions ')}>
{Object.keys(this.props.options).map((key) => (
<div
key={key}
className={"option " +
(this.props.option_active === key && 'active')}
onClick={() => {this.props.option_click(key, this.props.index)}}
>
{this.props.options[key]}
</div>
))}
</div>
}
{this.props.errorText &&
<div className="errorText">{this.props.errorText}</div>
}
</div>
);
}На первый взгляд универсально, на практике же компонент перегружен условиями, его сложно поддерживать и тестировать, со временем даже автору будет сложно разобраться в его работе. И кажется теперь, что где-то мы свернули не туда с универсальностью и собственными решениями. Мы тоже так подумали и решили, что есть же уже готовые решения (React Hook Form, Formik), давайте возьмем их.
Популярные решения решают сразу несколько проблем:
упрощает работу со стейтом и валидацией;
экономят код, дают хорошую производительность;
требуют меньше времени на обучение новых разработчиков работе с кодом наших форм.
Однако тут есть проблема, библиотеки помогают упаковать логику, но не ui. Вот пример формы с полями email и password и библиотекой React Hook Form.
import { useForm } from "react-hook-form";
export const LoginForm = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<input
type="email"
placeholder="Email"
{...register('email', { required: 'Введите email' })}
/>
{errors.email && <span>{errors.email.message}</span>}
<input
type="password"
placeholder="Пароль"
{...register('password', { required: 'Введите пароль' })}
/>
{errors.password && <span>{errors.password.message}</span>}
<button type="submit">Войти</button>
</form>
);
};У нас ушла пачка useState, валидации теперь прописываются в компоненте, мы сильно сократили верхнюю часть, относительно первой формы. Но что делать с выводом ошибок и дизайном каждого поля? Упакуем в отдельный компонент и в название добавим приписку Field. Так мы получим InputField, который уже можно переиспользовать в разных формах
type InputFieldProps = {
label: string;
error?: string;
} & React.InputHTMLAttributes<HTMLInputElement>;
export const InputField = ({ label, error, ...props }: InputFieldProps) => (
<div className="field">
<label className="field__label">{label}</label>
<input
className={`field__input ${error ? 'field__input--error' : ''}`}
{...props}
/>
{error && <span className="field__error">{error}</span>}
</div>
);В итоге получаем достаточно универсальный компонент для использования в разных формах
import { useForm } from "react-hook-form";
import { InputField } from "./InputField";
export const LoginForm = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<InputField
label="Email"
type="email"
error={errors.email?.message}
{...register('email', { required: 'Введите email' })}
/>
<InputField
label="Пароль"
type="password"
error={errors.password?.message}
{...register('password', { required: 'Введите пароль' })}
/>
<button type="submit">Войти</button>
</form>
);
};Уже не плохо, но мы все еще можем столкнуться с проблемами. Например нам будет сложно использовать InputField вне тега form, для каждого поля мы будем дублировать логику обработки ошибок, нет возможности внести даже небольшие изменения в дизайн поля.
Наше решение
Ощутив проблемы выше мы пришли к пониманию необходимости примитивов, на основе которых легко строить поля различных типов.
Примитивы - это маленькие переиспользуемые компоненты, которые:
ничего не знают про react-hook-form или бизнес-логику;
отвечают за внешний вид и базовое поведение;
легко расширяются (например за счет тем для поддержки разных стилей).
Вот пример простого примитива Input:
import { InputHTMLAttributes } from 'react';
import { classNames } from '@/shared/lib/classNames/classNames';
import cls from './Input.module.scss';
export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
className?: string;
ref?: React.Ref<HTMLInputElement>;
}
export const Input = (props: InputProps) => {
const { className, type = 'text', ref, ...otherProps } = props;
return (
<input
ref={ref}
type={type}
className={classNames(cls.Input, {}, [className])}
{...otherProps}
/>
);
};Нет ничего лишнего только код самого поля. Такую часть можно легко вставить в любую систему при этом она будет иметь уже нужный нам вид.
Обертку, в которую мы вставляем наши примитивы мы назвали ячейкой Cell.
import { classNames } from '@/shared/lib/classNames/classNames';
import { FieldErrorType, useFieldError } from '@/shared/lib/hooks/useFieldError';
import cls from './Cell.module.scss';
import { ReactNode } from 'react';
interface CellProps {
className?: string;
label?: string;
withoutBorder?: boolean;
error?: FieldErrorType;
noteText?: ReactNode;
children: ReactNode;
}
export const Cell = (props: CellProps) => {
const { className, label, withoutBorder, error, noteText, children } = props;
const errorMessage = useFieldError(error);
return (
<div className={classNames(cls.Cell, {}, [className])}>
{!withoutBorder && (
<div className={cls.content}>
<label className={cls.name}>{label || ''}</label>
<div className={cls.data}>{children}</div>
</div>
)}
{noteText && <div className={cls.note}>{noteText}</div>}
{withoutBorder && children}
{errorMessage && <div className={cls.errorMessage}>{errorMessage}</div>}
</div>
);
};Она отвечает за единый дизайн поля, вывод ошибок и сопутствующей информации (подписи, примечания).
Совмещая ячейку и примитивные поля, мы формируем уже непосредственный компонент формы, который работает с логикой react-hook-form.
import { InputHTMLAttributes } from 'react';
import { useFormContext } from 'react-hook-form';
import { Cell } from '@/shared/ui/FormPrimitives/Cell/Cell';
import { Input } from '@/shared/ui/FormPrimitives/Input/Input';
interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
className?: string;
label: string;
name: string;
}
export const TextField = (props: TextFieldProps) => {
const { className, label, name, ...otherProps } = props;
const {
register,
formState: { errors },
} = useFormContext();
return (
<Cell
className={className}
label={label}
error={errors[name]}
>
<Input
{...register(name)}
{...otherProps}
/>
</Cell>
);
};На каждый тип поля, который есть в html, мы создаем отдельный компонент TextField, TextareaField, SelectField, CheckboxField, RadioButtonField, FileField, плюс отдельно выделяем компонент под поля с масками MaskedField. Таким образом перекрываем все возможные поля, которые могут понадобиться при разработке форм.
import { classNames } from '@/shared/lib/classNames/classNames';
import { FormProvider, useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { TextField, MaskedField } from '@/shared/ui/FormFields';
import { ZzServerFormSchema, ZzServerFormType } from '../../model/types/zzServerFormSchema';
import { defaultValues } from './ZzServerForm.const';
import { masks } from '@/shared/lib/masks/commonMasks';
import cls from './ZzServerForm.module.scss';
interface ZzServerFormProps {
className?: string;
}
export const ZzServerForm = (props: ZzServerFormProps) => {
const { className } = props;
const methods = useForm<ZzServerFormType>({
resolver: zodResolver(ZzServerFormSchema),
defaultValues,
mode: 'onSubmit',
});
const { handleSubmit } = methods;
const onSubmit = handleSubmit(async (_, event) => {
const formData = new FormData(event?.target as HTMLFormElement);
console.log('Отправка формы: ', formData);
});
return (
<div className={classNames(cls.ZzServerForm, {}, [className])}>
<FormProvider {...methods}>
<form onSubmit={onSubmit}>
<div className={cls.row}>
<TextField
name="name"
label="Заголовок"
/>
<MaskedField
name="phone"
label="Телефон"
maskOptions={masks.phone}
placeholder="+7 (___) ___-__-__"
/>
</div>
<input type="submit" />
{methods.formState.errors.root && <div className={cls.error}>{methods.formState.errors.root.message}</div>}
</form>
</FormProvider>
</div>
);
};Как результат, простое использование полей без необходимости, что либо прокидывать. Заполняем только основные атрибуты, все остальное делает компонент внутри.
Заключение
Работа с формами в React традиционно сопряжена с рядом трудностей. Кастомная реализация часто приводит к созданию сложного и плохо поддерживаемого кода, а попытки разработать собственное решение заканчиваются перегруженными компонентами. Даже популярные библиотеки, решая проблемы логики, оставляют открытыми вопросы единого интерфейса и повторного использования компонентов.
Представленный подход предлагает решение этих проблем через систему простых примитивов и типовых полей. Базовые примитивы, такие как Input и Cell, обеспечивают единообразие дизайна и поведения, на основе которых строятся конкретные поля — TextField, MaskField, RadioField и другие. Это позволяет собирать формы из готовых, отлаженных блоков, а не писать их с нуля каждый раз.
В результате разработчики получают читаемый код, где каждое поле представлено небольшим самостоятельным компонентом, а не сотнями строк условной логики. Это обеспечивает единый UX/UI для всех форм, что гарантирует консистентность и упрощает работу дизайнеров и тестировщиков. Компоненты легко переиспользуются не только в формах, но и в других сценариях, таких как поиск, а система остаётся гибкой и простой для масштабирования.
Со стороны бизнеса это означает повышение скорости разработки. Создание новых форм ускоряется за счёт готовых решений, покрывающих до 90% потребностей. Надёжность системы возрастает, снижая количество ошибок при внесении изменений или добавлении новых полей. Пользователи получают предсказуемый и интуитивно понятный опыт взаимодействия, а новые члены команды быстрее входят в проект, осваивая единую библиотеку компонентов вместо разбора множества кастомных реализаций.