Form in React: input, checkbox, select e validazione

Un form React tiene il valore di ogni campo nello stato: l'input mostra value={state} e lo aggiorna con onChange. Quando l'utente invia, un gestore onSubmit chiama e.preventDefault() per fermare il ricaricamento della pagina e poi usa i valori già presenti nello stato.

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

Scrivi un nome e premi Invio o clicca il pulsante. Poi elimina la riga e.preventDefault();: l'anteprima mostra i campi che il browser avrebbe inviato in un invio nativo, che in una pagina reale la ricaricherebbe anche.

Un input il cui valore arriva dallo stato si chiama input controllato. L'alternativa, lasciare che sia il DOM a tenere il valore e leggerlo più tardi, è trattata in componenti controllati e non controllati.

Input di testo e textarea

Ogni campo di testo funziona allo stesso modo: value dallo stato, onChange legge e.target.value. Una <textarea> segue lo stesso schema. In HTML il suo testo va tra i tag, ma in React lo passi come 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>
    );
}

Poiché imposti tu il valore, puoi cambiare ciò che l'utente ha digitato prima che venga mostrato: il campo del titolo trasforma ogni lettera in maiuscola. Il contatore dei caratteri si aggiorna a ogni tasto perché body è stato e ogni modifica provoca un nuovo render.

Select

Un <select> riceve value sull'elemento select stesso, non selected su un'opzione. e.target.value è il value dell'opzione scelta.

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

Per una select multipla, aggiungi multiple e passa un array come value. Leggi le scelte con Array.from(e.target.selectedOptions, (o) => o.value).

Checkbox e radio button

Una checkbox si controlla con checked, non con value, e il suo gestore legge e.target.checked, che è true o false. I radio button di un gruppo condividono un name; ognuno è selezionato quando lo stato è uguale al suo valore.

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

Leggere e.target.value su una checkbox è un errore comune: per una checkbox senza attributo value restituisce la stringa "on" sia che la casella sia spuntata sia che non lo sia.

Un solo oggetto di stato per molti campi

Un form con dieci campi non ha bisogno di dieci chiamate a useState e dieci gestori. Tieni un solo oggetto, dai a ogni input un name che corrisponde a una chiave e scrivi un solo gestore che usa il nome come chiave calcolata: [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>
    );
}

Il gestore controlla il tipo di input così la checkbox memorizza un booleano e gli altri memorizzano testo. Per aggiungere un campo aggiungi una chiave all'oggetto iniziale e un input con lo stesso name; il gestore non va modificato. Lo spread mantiene tutti gli altri campi (vedi aggiornare array e oggetti).

Inviare un form

Metti la logica di invio sull'onSubmit del form, non sull'onClick del pulsante. onSubmit scatta anche quando l'utente preme Invio in un campo di testo, cosa che un gestore di clic perderebbe. Un <button> dentro un form è per default un pulsante di invio; dai agli altri pulsanti type="button" così non inviano il form.

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

Apri la console, scrivi una password e premi Invio: il form registra l'intero oggetto. Cliccare "Clear" non registra nulla, perché è type="button". Togli quell'attributo e anche Clear inizia a inviare il form.

Validazione e messaggi di errore

Una validazione semplice è una funzione che riceve i valori e restituisce un oggetto di messaggi. Eseguila all'invio, salva il risultato nello stato e mostra ogni messaggio sotto il suo campo. Disabilita il pulsante di invio mentre una richiesta è in corso, così un doppio clic non invia il form due volte.

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

Clicca Save con i campi vuoti per vedere entrambi i messaggi, poi compilali. saveProfile fa le veci di una richiesta reale: attende 800 millisecondi e si risolve. L'attributo noValidate disattiva i fumetti di validazione del browser così compaiono solo i tuoi messaggi; toglilo e aggiungi required a un input per confrontare.

Gli errori possono anche essere calcolati durante il rendering invece che memorizzati, per esempio const emailError = form.email && !form.email.includes('@'), che mostra il messaggio mentre l'utente scrive. Scegli il momento più adatto al form: all'invio è più tranquillo, mentre durante la digitazione dà un riscontro più rapido.

Form action in React 19

React 19 aggiunge un altro modo di gestire un form. Passa una funzione alla prop action del form. React impedisce il ricaricamento della pagina per te e chiama la funzione con un oggetto FormData che contiene ogni campo con un name. I campi non hanno bisogno di stato: sono non controllati, e React li svuota dopo che l'azione termina.

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

Scrivi un tuo commento e pubblicalo. La lista mostra il tuo testo, e l'input torna a Nice docs: dopo che l'azione si risolve, React riporta i campi non controllati al loro defaultValue. L'azione può essere asincrona, e mentre è in esecuzione React tratta l'aggiornamento come una transizione.

Per mostrare uno stato di attesa o un errore dall'azione, racchiudila con useActionState, che restituisce l'ultimo risultato, un'azione racchiusa per il form e un indicatore isPending. Anche un pulsante in profondità dentro il form può leggere lo stato di attesa con useFormStatus da react-dom:

import { useFormStatus } from 'react-dom';

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

useFormStatus non è caricato negli editor di questa pagina, quindi compare solo in questo blocco statico. Deve essere chiamato da un componente renderizzato dentro il <form>, non nel componente che renderizza il form.

Lo stato controllato con onSubmit e le form action con FormData funzionano entrambi in React 19. I campi controllati vanno bene per i form che reagiscono mentre scrivi (validazione dal vivo, un contatore di caratteri, campi che dipendono l'uno dall'altro). Le action vanno bene per i form in cui ti servono i valori solo quando l'utente invia.