Panduan Membina Komponen Borang React

𝗣𝗮𝗻𝗱𝘂𝗮𝗻 𝗠𝗲𝗺𝗯𝗶𝗻𝗮 𝗞𝗼𝗺𝗽𝗼𝗻𝗲𝗻 𝗕𝗼𝗿𝗮𝗻𝗴 𝗥𝗲𝗮𝗰𝘁

Membina borang dalam React memerlukan pengurusan keadaan (state management) yang teliti. Panduan ini menunjukkan cara membina borang pendaftaran dari awal.

Anda akan mempelajari empat konsep utama:

• Pengurusan Keadaan (State Management) Simpan semua medan borang dalam satu objek keadaan. Gunakan hook useState untuk menjejaki nama, umur, e-mel, dan kata laluan.

• Mengendalikan Input Gunakan satu fungsi untuk menguruskan semua perubahan input. Anda mengemas kini keadaan dengan menyebarkan (spreading) data lama dan menambah nilai baharu berdasarkan nama input.

• Pengesahan Borang Semak jika semua medan mengandungi data sebelum penghantaran. Paparkan amaran jika terdapat medan yang kosong.

• Sokongan Papan Kekunci Tambah pendengar (listener) untuk kekunci Enter. Ini membolehkan pengguna menghantar borang tanpa perlu mengklik butang.

Contoh Kod:

import { useState } from "react";

function FormValidation() { const [userdata, setUserdata] = useState({ name: "", age: "", mobile: "", email: "", dob: "", password: "" });

function getdata(e) { const { name, value } = e.target; setUserdata({ ...userdata, [name]: value }); }

function validate() { const { name, age, mobile, email, dob, password } = userdata; if (name && age && mobile && email && dob && password) { alert("Submitted successfully"); } else { alert("Please fill all fields"); } }

function handlekey(e) { if (e.key === "Enter") { validate(); } }

return (

Submit

); }

Sumber: https://dev.to/jayashree_a84b6eff7bc414e/react-form-component-blog-explanation-with-code-3enh