Form Submit
Menangani submit form React dengan onSubmit, preventDefault, dan update UI dari data form.
Tujuan belajar
- Memakai onSubmit pada form
- Mencegah reload halaman dengan event.preventDefault
- Menambahkan data form ke list state sederhana
Isi lesson
5 blok- 1.Submit form tidak boleh membuat halaman reloadBelum selesaiWajib
- 2.Submit menambahkan item ke listBelum selesaiWajib
- 3.Button submit berbeda dari button biasaBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Submit form tidak boleh membuat halaman reload
WajibForm HTML punya perilaku bawaan: saat submit, browser mencoba mengirim form dan memuat ulang halaman. Dalam React app, kita biasanya ingin menangani submit di component, membaca state field, lalu memperbarui UI tanpa reload.
Caranya: pasang `onSubmit` di `<form>`, buat handler, lalu panggil `event.preventDefault()` di awal handler.
Bagian ini memengaruhi progres lesson.
Submit menambahkan item ke list
Wajibimport { useState } from "react";
function TaskForm() {
const [title, setTitle] = useState("");
const [tasks, setTasks] = useState<string[]>([]);
function handleSubmit(event) {
event.preventDefault();
setTasks([...tasks, title]);
setTitle("");
}
return (
<form onSubmit={handleSubmit}>
<input value={title} onChange={(event) => setTitle(event.target.value)} />
<button type="submit">Tambah</button>
</form>
);
}`event.preventDefault()` mencegah reload. Setelah item ditambahkan ke `tasks`, input dikosongkan lagi dengan `setTitle("")`.
Bagian ini memengaruhi progres lesson.
Peringatan
WajibButton submit berbeda dari button biasa
Di dalam form, button tanpa `type` bisa dianggap submit. Gunakan `type="submit"` untuk tombol kirim form, dan `type="button"` untuk tombol aksi biasa seperti reset, toggle, atau filter.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususHandle submit tanpa reload
Latihan membuat form submit yang menambah item ke list dan mengosongkan input.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Form React biasanya ditangani lewat `onSubmit`.
- `event.preventDefault()` mencegah reload halaman.
- Data form bisa dipakai untuk update state lain, misalnya menambah item ke list.
- Setelah submit, field bisa dikosongkan dengan setter state.
- Berikutnya, kamu akan memecah form dan list menjadi component kecil.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Submit form tidak boleh membuat halaman reload.