Formulare mit Funktion

Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 30 von 47.

In einfachem HTML ist das action-Attribut eines Formulars eine URL, an die ein POST gesendet wird. In Next.js können Sie ihm stattdessen eine function übergeben:

import { addItem } from './actions';

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

Beim Absenden führt React drei Schritte für Sie aus: Es stoppt das normale Neuladen der Seite durch den Browser, sammelt die benannten Felder des Formulars in einem FormData-Objekt und ruft Ihre Action damit auf.

Beachten Sie, was nicht da ist: kein onSubmit, kein event.preventDefault(), kein State. Und diese Seite ist immer noch eine Server Component: Die Action ist eine Datenübergabe, kein Event-Handler, sodass sie die Grenze problemlos überschreitet.

Worauf Sie sich einstellen sollten: Der Eintrag wird gespeichert, aber die Liste auf dem Bildschirm ändert sich noch nicht. Die Seite wurde bereits auf dem Server gerendert und nichts hat ihr gesagt, dass sie erneut nachsehen soll. In zwei Lektionen werden Sie das mit einer einzigen Zeile beheben.

Aufgabe

Anfänger

Die Einkaufsliste hat ein Input-Feld und einen Button, aber nichts verbindet sie mit dem Server. Die Action ist bereits für dich in app/actions.js geschrieben.

Importiere in app/page.jsx addItem aus './actions'.
Hülle das Input-Feld und den Button in ein <form> mit id="add-form" ein.
Gib diesem Formular action={addItem}.

Lass das name="text" des Inputs unverändert: Die Action liest das Feld unter diesem Namen aus.

Probier es selbst

import './globals.css';

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

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