Формы в React: поля ввода, флажки, select и валидация

Форма в React хранит значение каждого поля в состоянии: поле показывает value={state} и обновляет его через onChange. Когда пользователь отправляет форму, обработчик onSubmit вызывает e.preventDefault(), чтобы остановить перезагрузку страницы, и затем использует значения, которые уже лежат в состоянии.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');
    const [greeting, setGreeting] = useState('');

    function handleSubmit(e) {
        e.preventDefault();
        setGreeting(`Hello, ${name || 'stranger'}!`);
    }

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name{' '}
                <input name="name" value={name} onChange={(e) => setName(e.target.value)} />
            </label>{' '}
            <button type="submit">Say hello</button>
            <p>{greeting}</p>
        </form>
    );
}

Введите имя и нажмите Enter или кнопку. Затем удалите строку e.preventDefault();: превью покажет поля, которые браузер отправил бы при нативной отправке, а на настоящей странице это ещё и перезагрузило бы её.

Поле ввода, значение которого берётся из состояния, называется контролируемым. Альтернатива, когда DOM хранит значение, а вы читаете его позже, разобрана на странице о контролируемых и неконтролируемых компонентах.

Текстовые поля и textarea

Все текстовые поля работают одинаково: value из состояния, onChange читает e.target.value. <textarea> следует тому же шаблону. В HTML его текст стоит между тегами, а в React его передают как value.

import { useState } from 'react';

export default function App() {
    const [title, setTitle] = useState('');
    const [body, setBody] = useState('');

    return (
        <div style={{ display: 'grid', gap: 8, maxWidth: 320 }}>
            <input
                value={title}
                onChange={(e) => setTitle(e.target.value.toUpperCase())}
                placeholder="Title (shouts)"
            />
            <textarea
                value={body}
                onChange={(e) => setBody(e.target.value)}
                rows={4}
                maxLength={140}
                placeholder="Up to 140 characters"
            />
            <small>{140 - body.length} characters left</small>
        </div>
    );
}

Поскольку значение задаёте вы сами, можно изменить то, что набрал пользователь, до того как это появится: поле заголовка превращает каждую букву в заглавную. Счётчик символов обновляется при каждом нажатии клавиши, потому что body это состояние, и каждое изменение вызывает новый рендер.

Select

<select> принимает value на самом элементе select, а не selected на option. e.target.value это value выбранного варианта.

import { useState } from 'react';

export default function App() {
    const [plan, setPlan] = useState('monthly');
    const prices = { monthly: '$12 a month', yearly: '$99 a year', free: '$0' };

    return (
        <div>
            <select value={plan} onChange={(e) => setPlan(e.target.value)}>
                <option value="free">Free</option>
                <option value="monthly">Monthly</option>
                <option value="yearly">Yearly</option>
            </select>
            <p>You pay {prices[plan]}.</p>
        </div>
    );
}

Для множественного выбора добавьте multiple и передайте массив как value. Читайте выбранные варианты через Array.from(e.target.selectedOptions, (o) => o.value).

Флажки и переключатели

Флажок контролируется через checked, а не value, и его обработчик читает e.target.checked, то есть true или false. Переключатели (radio) в группе имеют общий name; каждый отмечен, когда состояние равно его значению.

import { useState } from 'react';

export default function App() {
    const [newsletter, setNewsletter] = useState(false);
    const [size, setSize] = useState('m');

    return (
        <div>
            <label>
                <input
                    type="checkbox"
                    checked={newsletter}
                    onChange={(e) => setNewsletter(e.target.checked)}
                />
                Send me the newsletter
            </label>

            <p>Shirt size:</p>
            {['s', 'm', 'l'].map((s) => (
                <label key={s} style={{ marginInlineEnd: 12 }}>
                    <input
                        type="radio"
                        name="size"
                        value={s}
                        checked={size === s}
                        onChange={(e) => setSize(e.target.value)}
                    />
                    {s.toUpperCase()}
                </label>
            ))}

            <p>
                Size {size.toUpperCase()}, newsletter {newsletter ? 'on' : 'off'}.
            </p>
        </div>
    );
}

Читать e.target.value у флажка это частая ошибка: для флажка без атрибута value оно возвращает строку "on", отмечен он или нет.

Один объект состояния для многих полей

Форме с десятью полями не нужны десять вызовов useState и десять обработчиков. Храните один объект, дайте каждому полю name, совпадающий с ключом, и напишите один обработчик, который использует имя как вычисляемый ключ: [e.target.name].

import { useState } from 'react';

export default function App() {
    const [form, setForm] = useState({
        email: '',
        country: 'NO',
        terms: false,
    });

    function handleChange(e) {
        const { name, type, value, checked } = e.target;
        setForm({ ...form, [name]: type === 'checkbox' ? checked : value });
    }

    return (
        <div style={{ display: 'grid', gap: 8, maxWidth: 280 }}>
            <input name="email" value={form.email} onChange={handleChange} placeholder="Email" />
            <select name="country" value={form.country} onChange={handleChange}>
                <option value="NO">Norway</option>
                <option value="JP">Japan</option>
                <option value="BR">Brazil</option>
            </select>
            <label>
                <input name="terms" type="checkbox" checked={form.terms} onChange={handleChange} />
                I accept the terms
            </label>
            <pre>{JSON.stringify(form, null, 2)}</pre>
        </div>
    );
}

Обработчик проверяет тип поля, чтобы флажок сохранял булево значение, а остальные текст. Чтобы добавить поле, добавьте ключ в начальный объект и поле с тем же name; обработчик менять не нужно. Spread сохраняет все остальные поля (см. обновление массивов и объектов).

Отправка формы

Ставьте логику отправки в onSubmit формы, а не в onClick кнопки. onSubmit срабатывает и тогда, когда пользователь нажимает Enter в текстовом поле, а обработчик клика это пропустил бы. <button> внутри формы по умолчанию является кнопкой отправки; другим кнопкам давайте type="button", чтобы они не отправляли форму.

import { useState } from 'react';

export default function App() {
    const [form, setForm] = useState({ user: 'ada', password: '' });

    function handleChange(e) {
        setForm({ ...form, [e.target.name]: e.target.value });
    }

    function handleSubmit(e) {
        e.preventDefault();
        console.log('submitting', form);
    }

    return (
        <form onSubmit={handleSubmit}>
            <input name="user" value={form.user} onChange={handleChange} />{' '}
            <input name="password" type="password" value={form.password} onChange={handleChange} />{' '}
            <button type="button" onClick={() => setForm({ user: '', password: '' })}>
                Clear
            </button>{' '}
            <button type="submit">Log in</button>
        </form>
    );
}

Откройте консоль, введите пароль и нажмите Enter: форма выведет весь объект. Клик по «Clear» ничего не выводит, потому что это type="button". Удалите этот атрибут, и Clear тоже начнёт отправлять форму.

Валидация и показ ошибок

Простая валидация это функция, которая принимает значения и возвращает объект сообщений. Запускайте её при отправке, сохраняйте результат в состоянии и показывайте каждое сообщение под его полем. Отключайте кнопку отправки, пока выполняется запрос, чтобы двойной клик не отправил форму дважды.

import { useState } from 'react';

function validate({ email, age }) {
    const errors = {};
    if (!email.includes('@')) errors.email = 'Enter a valid email.';
    if (!age || Number(age) < 13) errors.age = 'You must be 13 or older.';
    return errors;
}

function saveProfile(data) {
    return new Promise((resolve) => setTimeout(() => resolve(data), 800));
}

export default function App() {
    const [form, setForm] = useState({ email: '', age: '' });
    const [errors, setErrors] = useState({});
    const [status, setStatus] = useState('idle');

    async function handleSubmit(e) {
        e.preventDefault();
        const found = validate(form);
        setErrors(found);
        if (Object.keys(found).length > 0) return;
        setStatus('saving');
        await saveProfile(form);
        setStatus('saved');
    }

    const change = (e) => setForm({ ...form, [e.target.name]: e.target.value });
    const error = { color: 'crimson', margin: '4px 0 8px', fontSize: 13 };

    return (
        <form onSubmit={handleSubmit} noValidate>
            <input name="email" value={form.email} onChange={change} placeholder="Email" />
            {errors.email && <p style={error}>{errors.email}</p>}
            <input name="age" type="number" value={form.age} onChange={change} placeholder="Age" />
            {errors.age && <p style={error}>{errors.age}</p>}
            <div style={{ marginTop: 8 }}>
                <button disabled={status === 'saving'}>
                    {status === 'saving' ? 'Saving...' : 'Save'}
                </button>
                {status === 'saved' && ' Saved.'}
            </div>
        </form>
    );
}

Нажмите Save с пустыми полями, чтобы увидеть оба сообщения, затем заполните их. saveProfile заменяет настоящий запрос: он ждёт 800 миллисекунд и завершается успешно. Атрибут noValidate отключает собственные подсказки валидации браузера, чтобы показывались только ваши сообщения; уберите его и добавьте required к полю, чтобы сравнить.

Ошибки можно и вычислять во время рендера, а не хранить, например const emailError = form.email && !form.email.includes('@'), что показывает сообщение по мере ввода. Выбирайте момент, который подходит форме: при отправке спокойнее, а при вводе обратная связь быстрее.

Действия форм в React 19

React 19 добавляет ещё один способ обработать форму. Передайте функцию в проп action формы. React сам предотвращает перезагрузку страницы и вызывает функцию с объектом FormData, в котором лежит каждое поле с name. Полям вообще не нужно состояние: они неконтролируемые, и React очищает их после завершения действия.

import { useState } from 'react';

function addComment(text) {
    return new Promise((resolve) => setTimeout(() => resolve(text), 500));
}

export default function App() {
    const [comments, setComments] = useState([]);

    async function postComment(formData) {
        const text = formData.get('comment');
        console.log('action received', text);
        const saved = await addComment(text);
        setComments((list) => [...list, saved]);
    }

    return (
        <form action={postComment}>
            <input name="comment" defaultValue="Nice docs" />{' '}
            <button type="submit">Post</button>
            <ul>
                {comments.map((c, i) => (
                    <li key={i}>{c}</li>
                ))}
            </ul>
        </form>
    );
}

Напишите свой комментарий и опубликуйте его. Список показывает ваш текст, а поле возвращается к Nice docs: после завершения действия React сбрасывает неконтролируемые поля к их defaultValue. Действие может быть асинхронным, и пока оно выполняется, React считает обновление переходом (transition).

Чтобы показать состояние ожидания или ошибку из действия, оберните его в useActionState, который возвращает последний результат, обёрнутое действие для формы и флаг isPending. Кнопка глубоко внутри формы тоже может прочитать состояние ожидания через useFormStatus из react-dom:

import { useFormStatus } from 'react-dom';

function SubmitButton() {
    const { pending } = useFormStatus();
    return <button disabled={pending}>{pending ? 'Posting...' : 'Post'}</button>;
}

useFormStatus не загружен в редакторах здесь, поэтому он показан только в этом статическом блоке. Его нужно вызывать из компонента, отрендеренного внутри <form>, а не в компоненте, который рендерит форму.

Контролируемое состояние с onSubmit и действия форм с FormData оба работают в React 19. Контролируемые поля подходят формам, которые реагируют во время ввода (живая валидация, счётчик символов, поля, зависящие друг от друга). Действия подходят формам, где значения нужны только при отправке.