Des formulaires interactifs

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy. Leçon 30 sur 47.

En HTML classique, l’action d’un formulaire est une URL vers laquelle effectuer une requête POST. Dans Next.js, vous pouvez lui transmettre directement une fonction :

import { addItem } from './actions';

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

Lors de la soumission, React fait trois choses pour vous : il empêche la soumission normale du navigateur, qui recharge la page, rassemble les champs nommés du formulaire dans un objet FormData, puis appelle votre action avec celui-ci.

Remarquez ce qui n’y est pas : pas de onSubmit, pas de event.preventDefault(), pas d’état. Et cette page reste un Server Component : l’action est une donnée transmise, et non un gestionnaire d’événement, elle franchit donc la frontière sans problème.

Une chose à prévoir : l’élément est enregistré, mais la liste à l’écran ne changera pas encore. La page a déjà été rendue sur le serveur, et rien ne lui a demandé de vérifier à nouveau. Dans deux leçons, vous corrigerez cela en une seule ligne.

Défi

Débutant

La liste de courses comporte un champ de saisie et un bouton, mais rien ne les relie au serveur. L’action est déjà écrite pour vous dans app/actions.js.

Dans app/page.jsx, importez addItem depuis './actions'.
Entourez le champ de saisie et le bouton d’un <form> avec id="add-form".
Donnez à ce formulaire action={addItem}.

Laissez l’attribut name="text" du champ de saisie tel quel : l’action lit le champ portant ce nom.

Essayez vous-même

import './globals.css';

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

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