Eyleme Geçen Formlar

Coddy'nin React Journey'sinin Next.js Temel Esasları bölümünün bir parçası. Ders 30 / 47.

Saf HTML'de bir formun action özelliği, POST isteğinin gönderileceği bir URL'dir. Next.js'te bunun yerine bir fonksiyon verebilirsin:

import { addItem } from './actions';

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

Gönderim sırasında React sizin için üç şey yapar: tarayıcının sayfayı yeniden yükleyen normal gönderimini durdurur, formun adlandırılmış alanlarını bir FormData nesnesi içinde toplar ve eyleminizi bununla çağırır.

Orada olmayan şeylere dikkat edin: onSubmit yok, event.preventDefault() yok, durum yok. Bu sayfa hâlâ bir Server Component: action, iletilen verilerdir; bir olay işleyicisi değildir, bu nedenle sınırı sorunsuzca aşar.

Hazırlıklı olmanız gereken bir şey var: öğe kaydedilir, ancak ekrandaki liste henüz değişmez. Sayfa sunucuda zaten oluşturulmuştur ve ona yeniden bakmasını söyleyen hiçbir şey yoktur. İki ders sonra bunu tek bir satırla düzelteceksiniz.

Görev

Başlangıç

Alışveriş listesinde bir giriş alanı ve bir düğme var, ancak bunları sunucuya bağlayan hiçbir şey yok. Eylem sizin için app/actions.js içinde zaten yazılmıştır.

app/page.jsx içinde addItem öğesini './actions' yolundan içe aktarın.
Giriş alanını ve düğmeyi id="add-form" değerine sahip bir <form> içinde sarın.
Bu forma action={addItem} değerini verin.

Giriş alanının name="text" değerini değiştirmeyin: eylem alanı bu adla okur.

Kendin dene

import './globals.css';

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

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