Khác biệt giữa controlled và uncontrolled input là gì?

Question

Accepted Answer

Tất cả quy về **ai là nguồn sự thật cho giá trị của input** — state của React, hay chính DOM. ## Controlled (React sở hữu giá trị) `value` của input được điều khiển bởi state, và `onChange` giữ state đồng bộ. DOM luôn phản ánh React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // mỗi lần gõ cập nhật state /> ``` Vì state là nguồn sự thật, bạn có thể validate, định dạng, hoặc biến đổi mỗi lần gõ (vd buộc viết hoa, giới hạn độ dài, vô hiệu hóa nút submit). ## Uncontrolled (DOM sở hữu giá trị) Trình duyệt giữ giá trị; bạn chỉ đọc nó khi cần qua một ref: ```jsx const inputRef = useRef(null); ; // khi submit: const value = inputRef.current.value; ``` ## Khi nào dùng cái nào - **Controlled**: hầu hết form — bạn có validation, UI có điều kiện, và một nguồn sự thật duy nhất. Nhược điểm là một lần render lại mỗi lần gõ (thường không đáng kể). - **Uncontrolled**: form đơn giản, input file (`` luôn uncontrolled), hoặc tích hợp widget không phải React. Ít code hơn, nhưng bạn không thể phản ứng với thay đổi khi chúng xảy ra. Trộn chúng (truyền cả `value` và `defaultValue`) là một lỗi thường gặp và kích hoạt một cảnh báo của React.