Ir al contenido principal

Entradas

Mostrando las entradas etiquetadas como componente controlado

Componentes controlados y no controlados en React

  ¿Cuál es la forma opuesta a lo que es un componente controlado en React? La forma opuesta a un componente controlado en React es un componente no controlado . 🔹 Diferencia clave Componente controlado : El valor del input (o cualquier elemento interactivo) está vinculado al estado de React . React es la “fuente de la verdad”. Ejemplo: jsx function Controlado() { const [valor, setValor] = useState("") return ( <input value={valor} onChange={(e) => setValor(e.target.value)} /> ) } Componente no controlado : El valor se maneja directamente en el DOM , no en el estado de React. Usás una ref para acceder al valor cuando lo necesitás. Ejemplo: jsx function NoControlado() { const inputRef = useRef(null) const manejarSubmit = () => { console.log(inputRef.current.value) // accede al valor directamente } return ( <> <input ref={inputRef} /> <button onClick={manejarSubmit}>Enviar</button> ...