ความแตกต่างระหว่าง input ที่ควบคุมได้และไม่ได้ควบคุมคืออะไร?

Question

Accepted Answer

มันเกี่ยวกับ **ใครเป็นแหล่งความจริงสำหรับค่า input** — React state หรือ DOM เอง ## ทำไมมันถึงสำคัญ ### ควบคุมได้ (React เป็นเจ้าของค่า) ค่า `value` ของ input ถูกควบคุมโดย state และ `onChange` ทำให้ state อยู่ในสภาวะซิงค์ DOM สะท้อน React เสมอ: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` เนื่องจาก state เป็นแหล่งความจริง คุณสามารถตรวจสอบ จัดรูปแบบ หรือแปลงที่ทีละครั้ง (เช่น บังคับให้เป็นตัวพิมพ์ใหญ่ จำกัดความยาว ปิดใช้งานปุ่มส่ง) ### ไม่ได้ควบคุม (DOM เป็นเจ้าของค่า) เบราว์เซอร์เก็บค่าไว้ คุณอ่านเฉพาะเมื่อจำเป็นผ่าน ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## เลือกใช้อย่างไร - **ควบคุมได้**: ฟอร์มส่วนใหญ่ — คุณได้รับการตรวจสอบ UI แบบมีเงื่อนไข และแหล่งความจริงเดียว ข้อเสียคือการ re-render ต่อการกดแป้น (ปกติแล้วไม่สำคัญ) - **ไม่ได้ควบคุม**: ฟอร์มง่ายๆ file inputs (`` ไม่ได้ควบคุมเสมอ) หรือการรวม widget ที่ไม่ใช่ React โค้ดน้อยลง แต่คุณไม่สามารถตอบสนองต่อการเปลี่ยนแปลงขณะที่เกิดขึ้น การผสมกัน (ส่งทั้ง `value` และ `defaultValue`) เป็นข้อผิดพลาดที่พบบ่อย และทำให้เกิดคำเตือน React