Controlled Components
Last updated: 2026-11-02
Controlled Components Controlled Components
A controlled component is one whose value is driven by React state: the value is bound to state, and onChange writes the new value back into state, closing the loop of one-way data flow plus event feedback. It is the default pattern for React forms, and it keeps the current input continuously validatable, submittable and able to drive other fields without touching the DOM imperatively. Because the state is the single source of truth, a controlled field can be reset, pre-filled or cross-checked against its neighbours at any moment.
| Group | Component Patterns |
|---|---|
| Kind | Pattern |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
<input
value={name} // state drives the display
onChange={e => setName(e.target.value)} // typing writes back to state
/>Returns：No return value; this entry describes an encoding pattern rather than a function.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
After typing "Alice" and picking "Advanced", the line below immediately shows "Hello, Alice (Advanced)" — every keystroke updates state once and the UI re-renders in sync.💡 Key Points
🏷️ More Component Patterns
💡 Related Cases
📚 Related Tutorials
❓ FAQ
