Formulir yang Bertindak

Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 30 dari 47.

Dalam HTML biasa, action pada formulir adalah URL tujuan POST. Di Next.js, kamu bisa memberikan fungsi sebagai gantinya:

import { addItem } from './actions';

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

Saat dikirimkan, React melakukan tiga hal untukmu: menghentikan pengiriman biasa yang memuat ulang halaman di browser, mengumpulkan kolom formulir yang memiliki nama ke dalam object FormData, dan memanggil action-mu dengan object tersebut.

Perhatikan apa yang tidak ada: tidak ada onSubmit, tidak ada event.preventDefault(), tidak ada state. Dan halaman ini tetap merupakan Server Component: action adalah data yang diteruskan, bukan event handler, jadi data tersebut dapat melewati batas dengan mudah.

Satu hal yang perlu kamu antisipasi: item sudah disimpan, tetapi list di layar belum akan berubah. Halaman sudah dirender di server, dan belum ada yang menyuruhnya untuk memeriksa kembali. Dua pelajaran lagi, kamu akan memperbaikinya dengan satu baris.

Tantangan

Pemula

shopping list memiliki input dan button, tetapi keduanya tidak terhubung ke server. action sudah ditulis untukmu di app/actions.js.

Di app/page.jsx, impor addItem dari './actions'.
Bungkus input dan button dengan <form> yang memiliki id="add-form".
Berikan form tersebut action={addItem}.

Biarkan name="text" pada input apa adanya: action membaca field berdasarkan nama tersebut.

Coba sendiri

import './globals.css';

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

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

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Dasar-Dasar Next.js

1Mengapa Next.js

Apa yang Ditambahkan Next.js Folder app Halaman Pertamamu Rangkuman: Mengapa Next.js

4Server & Client

Dua Jenis Komponen Membaca Error Baris 'use client'Jaga Bagian Client Tetap Kecil Server di Dalam Client Ringkasan: Server & Client

7Navigasi Client

Tautan Aktif Routing Terprogram Memfilter dengan URL Handler Rute Ringkasan: Navigasi

3Tata Letak dan Metadata

Tata Letak Utama Navigasi Bersama Tata Letak Bersarang Metadata Halaman Metadata Dinamis Ulasan: Tata Letak

6Server Actions

Apa Itu Server ActionFormulir yang BertindakMembaca Data Formulir Memuat Ulang Halaman Ringkasan: Server Actions