Formularze, które działają

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 30 z 47.

W zwykłym HTML action formularza to adres URL, na który wysyła się żądanie POST. W Next.js możesz przekazać w jego miejsce funkcję:

import { addItem } from './actions';

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

Po przesłaniu formularza React wykonuje za Ciebie trzy rzeczy: zatrzymuje standardowe przesyłanie formularza przez przeglądarkę, które powoduje ponowne wczytanie strony, zbiera nazwane pola formularza w obiekcie FormData i wywołuje Twoją akcję, przekazując jej ten obiekt.

Zwróć uwagę na to, czego nie ma: brak onSubmit, brak event.preventDefault() i brak stanu. A ta strona nadal jest komponentem serwerowym: akcja to przekazywane dalej dane, a nie procedura obsługi zdarzenia, więc bez problemu przekracza granicę.

Jedna rzecz, na którą warto się przygotować: element został zapisany, ale lista na ekranie jeszcze się nie zmieni. Strona została już wyrenderowana na serwerze i nic nie kazało jej sprawdzić ponownie. Za dwie lekcje naprawisz to jedną linijką.

Wyzwanie

Początkujący

Lista zakupów ma pole wejściowe i przycisk, ale nic nie łączy ich z serwerem. Akcja jest już przygotowana w app/actions.js.

W app/page.jsx zaimportuj addItem z './actions'.
Umieść pole wejściowe i przycisk w elemencie <form> z id="add-form".
Ustaw w tym formularzu action={addItem}.

Pozostaw name="text" pola wejściowego bez zmian: akcja odczytuje pole o tej nazwie.

Spróbuj swoich sił

import './globals.css';

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

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