Un controlled input en React significa…

Opciones

1. El DOM guarda el valor, que se lee con una ref
2. El estado de React manda, mediante value y onChange (Opción correcta)
3. El input está desactivado y no se puede escribir
4. El valor se guarda en el localStorage del navegador

Respuesta

El estado de React es la única fuente de verdad, mediante value + onChange

Por qué

En un controlled input, el estado de React guarda el valor: <input value={name} onChange={e => setName(e.target.value)} />. Cada tecla actualiza el estado, y el estado decide qué se muestra.

Esto permite validar o dar formato mientras se escribe.

Un input uncontrolled guarda su propio valor en el DOM y lo lees con una ref cuando hace falta.

const [name, setName] = useState("");
<input value={name} onChange={e => setName(e.target.value)} />

Recuerda

Controlled = el estado de React dirige el input.

Términos clave

• Input controlado
• Estado (UI)
• React
• DOM
• useState