🖊️ Uso de áreas de texto y campos de entrada en formularios React

🖊️ Uso de áreas de texto y campos de entrada en formularios React

En React, los formularios se manejan controlando los valores de los campos mediante el state. Podemos usar inputs para textos cortos y textareas para textos largos o comentarios. Esto nos permite sincronizar el valor del formulario con el estado del componente y controlar su comportamiento.

---

1️⃣ Input de texto controlado

Ejemplo de un campo de texto donde cada cambio se refleja en el estado del componente:

function App() {
  const [nombre, setNombre] = React.useState("");

  return (
    <div>
      <label>Nombre:</label>
      <input
        type="text"
        value={nombre}
        onChange={e => setNombre(e.target.value)}
      />
      <p>Valor ingresado: {nombre}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

Nombre:

Valor ingresado: …

---

2️⃣ Área de texto (textarea) controlada

Para comentarios o textos largos usamos <textarea>, controlando su valor con el state:

function App() {
  const [comentario, setComentario] = React.useState("");

  return (
    <div>
      <label>Comentario:</label>
      <textarea
        value={comentario}
        onChange={e => setComentario(e.target.value)}
      />
      <p>Comentario ingresado: {comentario}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

Comentario:

Comentario ingresado: …

---

3️⃣ Múltiples campos en un formulario

Podemos manejar varios inputs y textareas en un solo estado usando un objeto:

function App() {
  const [formData, setFormData] = React.useState({ nombre: "", mensaje: "" });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Nombre: ${formData.nombre}, Mensaje: ${formData.mensaje}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Nombre:</label>
      <input name="nombre" value={formData.nombre} onChange={handleChange} />

      <label>Mensaje:</label>
      <textarea name="mensaje" value={formData.mensaje} onChange={handleChange} />

      <button type="submit">Enviar</button>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

Nombre: Mensaje:

---

4️⃣ Buenas prácticas

• ✅ Usar siempre value y onChange para inputs controlados.
• ✅ Mantener el estado sincronizado con los campos del formulario.
• ✅ Validar los datos antes de procesarlos o enviarlos.
• ✅ Usar nombres claros para los name de cada input y textarea.
• ✅ Evitar manipular el DOM directamente, usar siempre React state.

← Volver al índice