Membaca Data Formulir
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 31 dari 47.
Aksimu menerima satu argumen: object FormData. Ini adalah fitur bawaan browser, dan kamu hanya memerlukan satu method darinya:
export async function addNote(formData) {
const text = formData.get('text');
const author = formData.get('author');
saveNote(text, author);
}String yang kamu berikan ke get() bukan id input dan bukan labelnya. String tersebut adalah atribut name:
<input name="author" /> → formData.get('author')Input tanpa name tidak terlihat oleh form. Input itu ditampilkan, kamu bisa mengetik di dalamnya, tetapi nilainya tidak pernah sampai: formData.get() mengembalikan null. Ini bug yang paling sering terjadi pada form server-action pertama, dan kegagalannya tidak terlihat.
get() selalu mengembalikan string (atau null), jadi nilai dari kolom angka perlu dikonversi:
const quantity = Number(formData.get('quantity'));
Tantangan
MudahForm catatan sudah terhubung, tetapi tidak ada yang berguna tersimpan: input tidak memiliki name, dan action menyimpan dua string kosong.
- Di
app/page.jsx, tambahkanname="text"ke input pertama danname="author"ke input kedua. - Di
app/actions.js, baca kedua field dariformData, bukan menggunakan string kosong.
Biarkan id seperti semula, dan pertahankan pemanggilan saveNote(text, author): hanya dua nilai di atasnya yang berubah.
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 dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di Dasar-Dasar Next.js
2Routing dan Tautan
Folder Menjadi RuteRute BertingkatMenautkan HalamanRute DinamisHalaman Tidak DitemukanRekap: Routing
3Tata Letak dan Metadata
Tata Letak UtamaNavigasi BersamaTata Letak BersarangMetadata HalamanMetadata DinamisUlasan: Tata Letak6Server Actions
Apa Itu Server ActionFormulir yang BertindakMembaca Data FormulirMemuat Ulang HalamanRingkasan: Server Actions