Formulare în React

Ce înseamnă un formular în React

Un formular are trei lucruri de gestionat: valorile câmpurilor, erorile de validare și starea trimiterii (pending, succes, eroare de server). React îți dă două moduri fundamentale de a ține valorile, iar toate librăriile de formulare sunt construite peste unul dintre ele.

Baza HTML (name, label, tipuri de input, validare nativă) e în lecția Formulare HTML — aici construim peste ea.

Controlled vs uncontrolled

Diferența dintre un input controlled și unul uncontrolled:

// controlled
const [email, setEmail] = useState('')
<input value={email} onChange={e => setEmail(e.target.value)} />

// uncontrolled
<input name="email" defaultValue={user.email} />

value fără onChange = input blocat (read-only). defaultValue = valoare inițială, apoi DOM-ul preia controlul.

Citirea datelor: 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')            // checkbox-uri cu același name → array
  const data = Object.fromEntries(form)       // ⚠️ păstrează doar ultima valoare pentru name-uri repetate
}

Valorile din FormData sunt mereu stringuri (sau File). Un checkbox bifat trimite 'on', unul nebifat nu apare deloc.

React 19: formulare cu acțiuni

React 19 permite să dai o funcție direct în action. React se ocupă de preventDefault, de FormData și de starea pending.

'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 invalid' }
  await api('/subscribe', { method: 'POST', body: formData })
  return { ok: true }
}

function SubmitButton() {
  const { pending } = useFormStatus()          // citește starea formularului părinte
  return <button disabled={pending}>{pending ? 'Se trimite…' : 'Abonează-mă'}</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>
  )
}

Cu o Server Action în loc de funcția client, același formular merge și fără JavaScript.

Erori accesibile

O eroare trebuie să fie văzută și auzită:

<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>}

Când îți trebuie o librărie

Pe scurt

• Uncontrolled + FormData pentru majoritatea formularelor; controlled când valoarea schimbă UI-ul live.
• React 19: action={fn}, useActionState pentru rezultat, useFormStatus pentru pending.
• Erori: aria-invalid + aria-describedby + role="alert".

Surse oficiale

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