10-0-1-Formularios Controlados

 

 Funcionan los Formularios Controlados en React (Explicación Sencilla)

Los formularios controlados en React son una forma de manejar los datos de tus inputs manteniendo el estado de cada campo sincronizado con el componente. Veamos cómo funcionan paso a paso:

🔹 Paso 1: Crear estados para cada campo

jsx

Copy

Download

import { useState } from "react"

const Controlado = () => {
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')

Cada campo del formulario necesita su propio estado. Aquí usamos useState para title y description.

🔹 Paso 2: Vincular el estado a los inputs

jsx

Copy

Download

<input
  type="text"
  value={title}
  onChange={(e) => setTitle(e.target.value)}
/>
<textarea
  value={description}
  onChange={(e) => setDescription(e.target.value)}
/>

• value={title}: Muestra el valor actual del estado

• onChange: Actualiza el estado cuando el usuario escribe

🔹 ¿Por qué "controlado"?

El formulario es "controlado" porque React maneja el estado del input, no el DOM. Cada vez que:

1. El usuario escribe → onChange actualiza el estado

2. El estado cambia → React re-renderiza con el nuevo valor

🔹 Beneficios:

✅ Estado siempre actualizado
✅ Validación más fácil
✅ Manipulación directa de los valores
✅ Integración con otros componentes React

🔹 Ejemplo completo:

jsx

Copy

Download

const Controlado = () => {
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log({ title, description }) // Datos disponibles aquí
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Título"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <textarea
        placeholder="Descripción"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      />
      <button type="submit">Enviar</button>
    </form>
  )
}

¡Y eso es todo! Con estos conceptos básicos ya puedes manejar formularios en React de manera controlada. 🎉

#React #Formularios #Frontend