Eyleme Geçen Formlar

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

Düz HTML'de bir formun action niteliği, POST isteği gönderilecek bir URL'dir. Next.js'te ise bunun yerine ona bir function verebilirsiniz:

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.

Neyin olmadığına dikkat edin: onSubmit yok, event.preventDefault() yok, durum (state) yok. Ve bu sayfa hâlâ bir Server Component: action, bir olay yöneticisi (event handler) değil, aktarılan bir veridir; bu yüzden sınırı sorunsuzca geçer.

Hazırlıklı olmanız gereken bir nokta: item kaydedildi, ancak ekrandaki list henüz değişmeyecek. Sayfa server üzerinde zaten render edildi ve hiçbir şey ona tekrar bakmasını söylemedi. İki ders sonra bunu tek bir satırda düzelteceksiniz.

Görev

Başlangıç

Alışveriş listesinde bir input ve bir button var, ancak bunları sunucuya bağlayan hiçbir şey yok. Action sizin için app/actions.js dosyasında zaten yazıldı.

app/page.jsx içinde, addItem fonksiyonunu './actions' konumundan import edin.
Input'u ve button'u id="add-form" olan bir <form> içine alın.
Bu forma action={addItem} özelliğini verin.

Input'un name="text" özelliğini olduğu gibi bırakın: action alanı bu isimle 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>
    );
}