Bab 8: Bekerja dengan Form

Mengelola input, validasi, dan submission dari pengguna.

Konsep: Controlled Components

Di HTML biasa, elemen form seperti <input> dan <textarea> memiliki *state* internal mereka sendiri. Di React, kita menggunakan pendekatan yang disebut controlled components (komponen terkontrol).

Artinya, *state* React menjadi satu-satunya sumber kebenaran (*single source of truth*). Nilai dari setiap input form disimpan dalam *state* komponen, dan setiap perubahan pada input akan memperbarui *state* tersebut melalui fungsi `onChange`.

Langkah-langkah Mengelola Form

1. Buat State untuk Setiap Input

Gunakan `useState` untuk membuat satu *state variable* untuk setiap kolom input di form Anda.

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

2. Hubungkan State ke Input

Gunakan prop value pada elemen input untuk menghubungkannya dengan *state*. Kemudian, gunakan prop onChange untuk memanggil fungsi *setter* dari *state* setiap kali nilainya berubah.

<input 
    type="email" 
    value={email} // Nilai input dikontrol oleh state 'email'
    onChange={(e) => setEmail(e.target.value)} // Update state saat pengguna mengetik
/>

3. Tangani Aksi Pengguna

Untuk menangani aksi submit, kita bisa menambahkan *event handler* onClick pada sebuah tombol. Di dalam fungsi *handler* tersebut, kita bisa memproses data yang sudah tersimpan di dalam *state*.

Contoh Form Login Interaktif:

Password