ข้อมูลเข้าแบบควบคุมกับไม่ควบคุม (บทนำ)

เป้าหมาย: เปรียบเทียบอินพุตแบบควบคุมกับอินพุตแบบไม่ควบคุม อินพุตแบบควบคุมใช้สถานะของรีแอ็กต์เป็นแหล่งข้อมูลจริง ส่วนอินพุตแบบไม่ควบคุมจะให้ DOM จัดการ

อินพุตแบบควบคุม: ค่าจะผูกกับสถานะและอัปเดตผ่าน onChange รีแอ็กต์จึงทราบค่าล่าสุดอยู่เสมอ

อินพุตนี้เป็นแบบควบคุม: ค่ามาจากสถานะและอัปเดตทุกครั้งที่มีการเปลี่ยนแปลง

อินพุตแบบไม่ควบคุม: DOM จะเก็บค่าไว้เอง และคุณสามารถอ่านค่าได้ด้วยการอ้างอิงเมื่อจำเป็นเท่านั้น

อินพุตนี้เป็นแบบไม่ควบคุม: รีแอ็กต์ไม่ได้จัดการค่า เราจะอ่านค่าด้วยการอ้างอิงเมื่อคลิกปุ่ม

เคล็ดลับ:

• แบบควบคุม = คาดเดาได้ สถานะรีแอ็กต์เป็นตัวควบคุมส่วนติดต่อผู้ใช้
• แบบไม่ควบคุม = เรียบง่ายกว่า แต่ควบคุมได้น้อยกว่า
• ควรใช้แบบควบคุมสำหรับแบบฟอร์ม

สรุปทบทวน: อินพุตแบบควบคุมผูกกับสถานะของรีแอ็กต์เพื่อให้เชื่อถือได้ อินพุตแบบไม่ควบคุมให้ DOM จัดการค่า ควรเลือกแบบควบคุมสำหรับแบบฟอร์มส่วนใหญ่