ฟอร์มและ Controlled Components
Controlled components, uncontrolled components, การตรวจสอบฟอร์ม, React Hook Form, การจัดการ submit
1Controlled component ใน React คืออะไร?
Controlled component ใน React คืออะไร?
คำตอบ
Controlled component คือองค์ประกอบของฟอร์มที่ค่าถูกจัดการโดย state ของ React ผ่าน prop value และ handler onChange ซึ่งหมายความว่า React จะกลายเป็นแหล่งข้อมูลที่เชื่อถือได้เพียงแหล่งเดียว ต่างจาก uncontrolled components ที่ DOM จัดการค่าของตัวเอง controlled components ให้การควบคุมข้อมูลฟอร์มอย่างเต็มที่และช่วยให้การตรวจสอบข้อมูลแบบเรียลไทม์ทำได้ง่ายขึ้น
2จะสร้าง controlled input ใน React ได้อย่างไร?
จะสร้าง controlled input ใน React ได้อย่างไร?
คำตอบ
Controlled input ต้องการสององค์ประกอบที่จำเป็น: prop value ที่ผูกกับ state ของ React และ handler onChange เพื่ออัปเดต state นั้น หากไม่มี onChange input จะเป็นแบบอ่านอย่างเดียวเพราะ React จะป้องกันการแก้ไขใดๆ วิธีนี้ทำให้ state ของ React ยังคงซิงโครไนซ์กับค่าที่แสดงใน input ทำให้สามารถตรวจสอบความถูกต้องทันทีหรือแปลงข้อมูลได้
3ความแตกต่างระหว่าง controlled component และ uncontrolled component คืออะไร?
ความแตกต่างระหว่าง controlled component และ uncontrolled component คืออะไร?
คำตอบ
ความแตกต่างพื้นฐานอยู่ที่แหล่งข้อมูลที่เชื่อถือได้ Controlled component เก็บค่าไว้ใน state ของ React (แหล่งข้อมูลที่เชื่อถือได้เพียงแหล่งเดียว) ในขณะที่ uncontrolled component ปล่อยให้ DOM จัดการค่าของตัวเอง ซึ่งเข้าถึงได้ผ่าน ref Controlled components ให้การควบคุมมากกว่าและช่วยให้การตรวจสอบข้อมูลแบบเรียลไทม์ทำได้ง่ายขึ้น แต่ uncontrolled components อาจง่ายกว่าสำหรับฟอร์มพื้นฐานที่ไม่ต้องการการตรวจสอบที่ซับซ้อน
จะจัดการ controlled input หลายตัวในฟอร์มเดียวกันได้อย่างไร?
จะสร้าง controlled checkbox ใน React ได้อย่างไร?
+17 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ React / Next.js อื่นๆ
พื้นฐาน JavaScript
พื้นฐาน React
React Hooks
วงจรชีวิตของ component
React Router
การจัดการ state ด้วย Context
การดึงข้อมูลและ API
React Query (TanStack Query)
Styling & CSS-in-JS
พื้นฐาน Next.js
TypeScript กับ React
การดึงข้อมูล Next.js
Server Actions ของ Next.js
การกำหนดเส้นทางและการนำทางใน Next.js
API Routes ใน Next.js
Metadata & SEO ใน Next.js
Middleware และ Auth ใน Next.js
การทดสอบ React
Zustand State Management
การเพิ่มประสิทธิภาพ React
Error Boundaries & การจัดการข้อผิดพลาด
Advanced React Patterns
ฟีเจอร์ขั้นสูงของ Next.js
การ Deploy & Production ของ Next.js
Architecture & Design Patterns
React Server Components
การแปลภาษา Next.js
React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด
เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี