Memahami Form dalam React

Pengguna berinteraksi dengan aplikasi web melalui form. Anda menggunakannya untuk login, pencarian, dan halaman kontak. React mempermudah pengelolaan data ini melalui state.

Komponen Terkontrol (Controlled Components)

Di React, Anda sering menggunakan controlled components. Ini berarti state React mengelola nilai input.

Cara kerjanya: • Prop value menghubungkan input ke state Anda. • Event onChange memperbarui state saat pengguna mengetik. • React tetap menjadi satu-satunya sumber kebenaran (single source of truth).

Prosesnya mengikuti alur ini: Input Pengguna → Event onChange → Pembaruan State → Re-render → UI yang Diperbarui

Mengelola Banyak Field

Anda tidak memerlukan state terpisah untuk setiap input. Anda dapat menggunakan satu objek untuk menyimpan semua data.

Gunakan pola ini: • Gunakan satu objek state untuk seluruh form. • Gunakan atribut name pada input Anda. • Buat satu fungsi handleChange untuk memperbarui state.

Sintaks [e.target.name]: e.target.value memperbarui field spesifik yang memicu perubahan tersebut. Hal ini menjaga kode Anda tetap bersih.

Menangani Submission

Saat pengguna mengirimkan (submit) form, browser akan memuat ulang halaman secara default. Ini akan merusak aplikasi Anda.

Gunakan e.preventDefault() di dalam fungsi onSubmit Anda. Ini menghentikan pemuatan ulang dan membiarkan React menangani datanya.

Tipe Input Khusus

Input yang berbeda memerlukan properti yang berbeda: • Input teks menggunakan e.target.value. • Checkbox menggunakan e.target.checked. • Menu select menggunakan prop value untuk melacak opsi yang dipilih.

Tips Validasi

Selalu validasi data sebelum Anda mengirimkannya. Periksa: • Field yang wajib diisi. • Format email yang benar. • Panjang minimum kata sandi.

Praktik Terbaik untuk Form React

Menguasai langkah-langkah ini membantu Anda membangun aplikasi web yang profesional.

Sumber: https://dev.to/aj_arul/understanding-forms-in-react-19gj