Формы в React

Что значит форма в React

У формы три вещи, которыми нужно управлять: значения полей, ошибки валидации и состояние отправки (pending, успех, ошибка сервера). React даёт два базовых способа хранить значения, и все библиотеки форм построены на одном из них.

База HTML (name, label, типы полей, нативная валидация) — в уроке Формы HTML; здесь мы строим поверх неё.

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

Разница между контролируемым и неконтролируемым полем:

// контролируемое
const [email, setEmail] = useState('')
<input value={email} onChange={e => setEmail(e.target.value)} />

// неконтролируемое
<input name="email" defaultValue={user.email} />

value без onChange = заблокированное поле (только чтение). defaultValue = начальное значение, дальше управляет DOM.

Чтение данных: FormData

function onSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault()
  const form = new FormData(e.currentTarget)
  const email = String(form.get('email'))
  const tags = form.getAll('tags')            // чекбоксы с одним name → массив
  const data = Object.fromEntries(form)       // ⚠️ для повторяющихся name сохраняет только последнее значение
}

Значения FormData — всегда строки (или File). Отмеченный чекбокс отправляет 'on', неотмеченный не появляется вообще.

React 19: формы с действиями

React 19 позволяет передать функцию прямо в action. React сам займётся preventDefault, FormData и состоянием ожидания.

'use client'
import { useActionState } from 'react'
import { useFormStatus } from 'react-dom'

type State = { error?: string; ok?: boolean }

async function subscribe(prev: State, formData: FormData): Promise<State> {
  const email = String(formData.get('email') ?? '')
  if (!email.includes('@')) return { error: 'Неверный email' }
  await api('/subscribe', { method: 'POST', body: formData })
  return { ok: true }
}

function SubmitButton() {
  const { pending } = useFormStatus()          // читает состояние родительской формы
  return <button disabled={pending}>{pending ? 'Отправка…' : 'Подписаться'}</button>
}

export function Newsletter() {
  const [state, action] = useActionState(subscribe, {})
  return (
    <form action={action}>
      <input name="email" type="email" required />
      {state.error && <p role="alert">{state.error}</p>}
      <SubmitButton />
    </form>
  )
}

С Server Action вместо клиентской функции та же форма работает даже без JavaScript.

Доступные ошибки

Ошибку нужно видеть и слышать:

<label htmlFor="email">Email</label>
<input id="email" name="email" aria-invalid={!!error} aria-describedby={error ? 'email-error' : undefined} />
{error && <p id="email-error" role="alert">{error}</p>}

Когда нужна библиотека

Коротко

• Неконтролируемые + FormData для большинства форм; контролируемые — когда значение меняет интерфейс вживую.
• React 19: action={fn}, useActionState для результата, useFormStatus для ожидания.
• Ошибки: aria-invalid + aria-describedby + role="alert".

Официальные источники

• react.dev — <form>
• react.dev — <input> (controlled)
• react.dev — useActionState
• react.dev — useFormStatus