Componentes Controlados y No Controlados en Formularios React

Los componentes controlados y no controlados son dos métodos clave para gestionar inputs y formularios en interfaces de usuario en React. A través de ellos, puedes decidir si deseas un control inmediato sobre el valor ingresado o si prefieres capturarlo de forma indirecta según la acción del usuario. A continuación, exploramos estos conceptos y su implementación en código.

¿Qué es un componente controlado y cómo funciona?

Un componente controlado se caracteriza por manejar el valor del input directamente en el estado del componente. Esto permite:

• Reactividad: React renderiza nuevamente cada vez que el estado cambia, reflejando el valor actual en la interfaz.
• Validaciones en tiempo real: Puedes validar o filtrar el input mientras el usuario escribe, facilitando la detección de errores.

Para crear un componente controlado en React:

1. Crea un estado local para el valor del input:

   const [value, setValue] = useState('');
   

2. Vincula el input a este estado con value y onChange:

   "text" 
      value={value} 
      onChange={(e) => setValue(e.target.value)} 
      placeholder="Ingresa el código del cupón" 
   />
   

3. Muestra el valor en tiempo real en la interfaz:

   Cupón de descuento: <b>{value}b>p>
   

¿Qué es un componente no controlado y cuándo usarlo?

Un componente no controlado mantiene su valor fuera del estado de React, siendo ideal para formularios simples o cuando el valor no necesita control inmediato.

• Uso de referencias (Refs): En vez de onChange, se emplean referencias para capturar el valor cuando sea necesario.
• Ejemplo de botón: Puedes mostrar el valor solo tras hacer clic en un botón, sin la necesidad de actualizaciones en tiempo real.

Implementación de un componente no controlado:

1. Crea una referencia con useRef:

   const inputRef = useRef(null);
   

2. Asigna la referencia al input:

   "text" 
      placeholder="Nombre del producto" 
      ref={inputRef} 
   />
   

3. Accede al valor en un evento, como el clic en un botón:

   const handleSubmit = () => {
      alert(`Nuevo producto en el carrito: ${inputRef.current.value}`);
   };
   <button onClick={handleSubmit}>Añadir al carritobutton>
   

¿Cuándo elegir un componente controlado o no controlado?

• Componentes controlados son ideales cuando:

  • Necesitas validar datos en tiempo real.
  • Requieres una interfaz reactiva que responda a cada cambio en el input.

• Componentes no controlados funcionan mejor cuando:

  • El valor se procesa solo tras un evento específico, como un clic.
  • Buscas una implementación más simple en formularios sin validaciones complejas.