Controlled Input
受控元件（受控輸入）
01你是不是遇到這個 / THE SYMPTOM
我在 React 寫表單，想即時拿到使用者打的字、或想在送出前先驗證 / 限制只能打數字 / 即時顯示字數，但搞不清楚到底該用 value 還是 defaultValue，有時還跳「input 從 uncontrolled 變 controlled」的警告。
↑ 如果你點頭了，你要的關鍵字就是 Controlled Input。
02這是什麼 / DEFINITION
在 React 裡，表單欄位的值由 state 完全掌控（value 綁 state、onChange 更新 state），畫面顯示什麼永遠以 state 為準，而非由瀏覽器 DOM 自己保管。
03什麼時候用 / WHEN TO USE
需要即時讀取或操控輸入內容時：即時驗證、字數統計、格式化（千分位 / 電話）、依輸入連動其他欄位、或送出前統一管理表單資料。
04怎麼跟 AI 說 / HOW TO ASK
直接複製這句、貼進 Claude Code / Cursor / Copilot / ChatGPT：
幫我把這個輸入框改成 React controlled input：用 useState 存值、value 綁 state、onChange 更新 state，並在 onChange 裡即時驗證只能輸入數字。
05常見坑 / WATCH OUT
⚠ 相對詞是 uncontrolled component（用 ref 讀 DOM 值）。最常見錯誤是 value 給了 undefined 害它在受控/非受控間切換而報警告——要嘛從一開始就給空字串，要嘛全程用 defaultValue。
06相關的詞 / RELATED