คู่มือการสร้าง React Form Component

คู่มือการสร้าง 𝗥𝗲𝗮𝗰𝘁 𝗙𝗼𝗿𝗺 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁

การสร้างฟอร์มใน React จำเป็นต้องมีการจัดการ state อย่างระมัดระวัง คู่มือนี้จะแสดงวิธีสร้างฟอร์มลงทะเบียนตั้งแต่เริ่มต้น

คุณจะได้เรียนรู้ 4 แนวคิดหลัก:

• การจัดการ State (State Management) เก็บข้อมูลฟิลด์ทั้งหมดของฟอร์มไว้ใน state object เดียวกัน ใช้ hook useState เพื่อติดตามค่า name, age, email และ password

• การจัดการ Input (Handling Inputs) ใช้ฟังก์ชันเดียวในการจัดการการเปลี่ยนแปลงของ input ทั้งหมด โดยคุณจะอัปเดต state ด้วยการ spread ข้อมูลเดิมและเพิ่มค่าใหม่เข้าไปตามชื่อของ input

• การตรวจสอบความถูกต้องของฟอร์ม (Form Validation) ตรวจสอบว่าทุกฟิลด์มีข้อมูลครบถ้วนก่อนการส่งข้อมูล โดยจะแสดง alert หากมีฟิลด์ใดฟิลด์หนึ่งว่าง

• การรองรับคีย์บอร์ด (Keyboard Support) เพิ่ม listener สำหรับปุ่ม Enter เพื่อให้ผู้ใช้สามารถส่งฟอร์มได้โดยไม่ต้องคลิกปุ่ม

ตัวอย่างโค้ด:

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

); }

ที่มา: https://dev.to/jayashree_a84b6eff7bc414e/react-form-component-blog-explanation-with-code-3enh