Moduli che agiscono

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 30 di 47.

Nel semplice HTML, action di un modulo è un URL a cui inviare una richiesta POST. In Next.js puoi passargli invece una funzione:

import { addItem } from './actions';

<form action={addItem}>
    <input name="text" />
    <button type="submit">Add</button>
</form>

Al momento dell'invio, React fa tre cose per te: impedisce il normale invio del browser che ricarica la pagina, raccoglie i campi del modulo con nome in un oggetto FormData e chiama la tua action passandoglielo.

Nota cosa non c’è: niente onSubmit, niente event.preventDefault(), nessuno stato. E questa pagina è ancora un Server Component: l’azione è un dato che viene passato, non un gestore di eventi, quindi attraversa tranquillamente il confine.

Una cosa a cui prepararti: l’elemento viene salvato, ma l’elenco sullo schermo non cambierà ancora. La pagina è già stata renderizzata sul server e nulla le ha detto di controllare di nuovo. Tra due lezioni sistemerai tutto con una riga.

Sfida

Principiante

La lista della spesa ha un campo di input e un pulsante, ma non c'è nulla che li colleghi al server. L'action è già scritta per te in app/actions.js.

In app/page.jsx, importa addItem da './actions'.
Racchiudi il campo di input e il pulsante in un <form> con id="add-form".
Assegna a quel form action={addItem}.

Lascia invariato name="text" del campo di input: l'action legge il campo usando quel nome.

Provalo tu

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}