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 pur, l'attribut action d'un formulaire est une URL vers laquelle effectuer une requête POST. Dans Next.js, vous pouvez lui passer une function à la place :

import { addItem } from './actions';

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

Lors du submit, React fait trois choses pour vous : il arrête le rechargement de page habituel du navigateur, collecte les champs nommés du form dans un objet FormData, et appelle votre action avec celui-ci.

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

Une chose à prévoir : l'item est sauvegardé, mais la list à l'écran ne changera pas tout de suite. La page est déjà rendue sur le server, et rien ne lui a dit de regarder à nouveau. Dans deux leçons, vous corrigerez cela en une seule ligne.

Défi

Débutant

La liste de courses contient un input 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'.
Enveloppez l'input et le bouton dans un <form> avec id="add-form".
Attribuez à ce formulaire action={addItem}.

Laissez le name="text" de l'input tel quel : l'action lit le champ à partir de 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>
    );
}