𝗠𝗲𝗺𝗮𝗵𝗮𝗺𝗶 𝗕𝗼𝗿𝗮𝗻𝗴 𝗱𝗮𝗹𝗮𝗺 𝗥𝗲𝗮𝗰𝘁

Pengguna berinteraksi dengan aplikasi web melalui borang. Anda menggunakannya untuk log masuk, carian, dan halaman hubungan. React memudahkan pengurusan data ini melalui state.

Controlled Components

Dalam React, anda sering menggunakan komponen terkawal. Ini bermakna state React menguruskan nilai input.

Cara ia berfungsi: • Prop value menyambungkan input kepada state anda. • Acara onChange mengemas kini state semasa pengguna menaip. • React kekal sebagai satu-satunya sumber kebenaran.

Proses ini mengikut aliran ini: Input Pengguna → Acara onChange → Kemas Kini State → Render Semula → UI Dikemas Kini

Menguruskan Pelbagai Medan

Anda tidak memerlukan state yang berasingan untuk setiap input. Anda boleh menggunakan satu objek untuk menyimpan semua data.

Gunakan corak ini: • Gunakan satu objek state untuk keseluruhan borang. • Gunakan atribut name pada input anda. • Cipta satu fungsi handleChange untuk mengemas kini state.

Sintaks [e.target.name]: e.target.value mengemas kini medan khusus yang mencetuskan perubahan tersebut. Ini memastikan kod anda bersih.

Mengendalikan Penghantaran

Apabila pengguna menghantar borang, pelayar akan memuat semula halaman secara lalai. Ini akan merosakkan aplikasi anda.

Gunakan e.preventDefault() di dalam fungsi onSubmit anda. Ini menghentikan muat semula dan membolehkan React mengendalikan data tersebut.

Jenis Input Khas

Input yang berbeza memerlukan sifat yang berbeza: • Input teks menggunakan e.target.value. • Kotak semak menggunakan e.target.checked. • Menu pilihan menggunakan prop value untuk menjejak pilihan yang dibuat.

Tip Pengesahan

Sentiasa sahkan data sebelum anda menghantarnya. Semak untuk: • Medan wajib. • Format e-mel yang betul. • Panjang kata laluan minimum.

Best Practices for React Forms

Menguasai langkah-langkah ini membantu anda membina aplikasi web yang profesional.

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