ทำความเข้าใจเรื่อง Forms ใน React

ผู้ใช้งานโต้ตอบกับเว็บแอปผ่านฟอร์ม (forms) คุณใช้ฟอร์มสำหรับการเข้าสู่ระบบ การค้นหา และหน้าติดต่อสอบถาม React ช่วยให้การจัดการข้อมูลเหล่านี้เป็นเรื่องง่ายผ่าน state

Controlled Components

ใน React คุณมักจะใช้ controlled components ซึ่งหมายความว่า React state จะเป็นตัวจัดการค่าของ input

หลักการทำงาน: • prop value จะเชื่อมต่อ input เข้ากับ state ของคุณ • event onChange จะอัปเดต state ในขณะที่ผู้ใช้พิมพ์ • React จะยังคงเป็นแหล่งข้อมูลที่ถูกต้องเพียงหนึ่งเดียว (single source of truth)

กระบวนการทำงานเป็นไปตามลำดับนี้: User Input → onChange Event → State Update → Re-render → Updated UI

การจัดการหลายฟิลด์ (Multiple Fields)

คุณไม่จำเป็นต้องสร้าง state แยกกันสำหรับทุกๆ input คุณสามารถใช้ object เพียงอันเดียวในการเก็บข้อมูลทั้งหมดได้

ใช้รูปแบบนี้: • ใช้ state object เพียงอันเดียวสำหรับทั้งฟอร์ม • ใช้ attribute name ใน input ของคุณ • สร้างฟังก์ชัน handleChange เพียงฟังก์ชันเดียวเพื่ออัปเดต state

ไวยากรณ์ [e.target.name]: e.target.value จะอัปเดตฟิลด์เฉพาะเจาะจงที่ทำให้เกิดการเปลี่ยนแปลง วิธีนี้จะช่วยให้โค้ดของคุณสะอาดและเป็นระเบียบ

การจัดการการส่งข้อมูล (Submissions)

เมื่อผู้ใช้ส่งฟอร์ม เบราว์เซอร์จะรีเฟรชหน้าเว็บโดยค่าเริ่มต้น ซึ่งจะทำให้แอปของคุณทำงานผิดพลาด

ให้ใช้ e.preventDefault() ภายในฟังก์ชัน onSubmit ของคุณ เพื่อหยุดการรีโหลดหน้าเว็บและปล่อยให้ React เป็นตัวจัดการข้อมูลแทน

ประเภท Input พิเศษ

Input แต่ละประเภทต้องการ property ที่แตกต่างกัน: • Text input ใช้ e.target.value • Checkbox ใช้ e.target.checked • Select menu ใช้ prop value เพื่อติดตามตัวเลือกที่ถูกเลือก

เคล็ดลับการตรวจสอบข้อมูล (Validation)

ควรตรวจสอบความถูกต้องของข้อมูลเสมอ (validate) ก่อนที่จะส่งข้อมูล โดยตรวจสอบสิ่งต่อไปนี้: • ฟิลด์ที่จำเป็น (Required fields) • รูปแบบอีเมลที่ถูกต้อง • ความยาวขั้นต่ำของรหัสผ่าน

แนวทางปฏิบัติที่ดีที่สุด (Best Practices) สำหรับ React Forms

การเชี่ยวชาญขั้นตอนเหล่านี้จะช่วยให้คุณสร้างเว็บแอปพลิเคชันระดับมืออาชีพได้

ที่มา: https://dev.to/aj_arul/understanding-forms-in-react-19gj