16-formulario-sss- levantar el estado

 

Tutorial: Formularios en React - Manejo de Inputs📝 Conceptos Básicos de Formularios en React

En React, los formularios se manejan de forma diferente a HTML puro. React controla los datos del formulario a través del estado (state).

🎯 Ejemplo 1: Input Básico Controlado

import React, { useState } from 'react';

function FormularioBasico() {

  // 1. Creamos el estado para almacenar el valor del input

  const [texto, setTexto] = useState('');

  // 2. Función para manejar los cambios en el input

  const manejarCambio = (evento) => {

    // event.target.value contiene el nuevo valor

    setTexto(evento.target.value);

  };

  // 3. Función para manejar el envío del formulario

  const manejarEnvio = (evento) => {

    evento.preventDefault(); // Evita que la página se recargue

    alert(`Texto enviado: ${texto}`);

    setTexto(''); // Limpiamos el input después de enviar

  };

  return (

    <form onSubmit={manejarEnvio}>

      <label htmlFor="miInput">

        Escribe algo:

      </label>

      

      {/* Input controlado por React */}

      <input

        id="miInput"

        type="text"

        value={texto} // El valor viene del estado

        onChange={manejarCambio} // Actualiza el estado cuando cambia

        placeholder="Escribe aquí..."

      />

      

      <button type="submit">

        Enviar

      </button>

      {/* Mostramos el valor actual en tiempo real */}

      <p>Texto actual: {texto}</p></form>);

}export default FormularioBasico;

🔍 Explicación Paso a Paso

Paso 1: Crear el Estado

javascript

const [texto, setTexto] = useState('');

• texto: Variable que almacena el valor actual (string vacío inicialmente)

• setTexto: Función para actualizar el valor

Paso 2: Input Controlado

jsx

<input

  value={texto}

  onChange={manejarCambio}

/>

• value={texto}: El input muestra lo que hay en el estado

• onChange={manejarCambio}: Cuando el usuario escribe, se ejecuta manejarCambio

Paso 3: Función de Cambio

javascript

const manejarCambio = (evento) => {

  setTexto(evento.target.value);

};

• evento.target.value: Contiene el nuevo texto escrito por el usuario

• setTexto(): Actualiza el estado con el nuevo valor

📊 Ejemplo 2: Input con Validación

import React, { useState } from 'react';

function FormularioConValidacion() {

  const [email, setEmail] = useState('');

  const [error, setError] = useState('');

  const manejarCambioEmail = (e) => {

    const valor = e.target.value;

    setEmail(valor);

    

    // Validación simple de email

    if (valor && !valor.includes('@')) {

      setError('Debe contener @');

    } else {

      setError('');

    }

  };

  const manejarEnvio = (e) => {

    e.preventDefault();

    if (!error && email) {

      alert(`Email válido: ${email}`);

      setEmail('');

    } else {

      alert('Corrige el email primero');

    }

  };

  return (

    <form onSubmit={manejarEnvio} style={{ padding: '20px' }}>

      <h3>Registro de Email</h3>

      

      <div>

        <label>

          Tu email:

          <input

            type="email"

            value={email}

            onChange={manejarCambioEmail}

            placeholder="ejemplo@correo.com"

            style={{

              marginLeft: '10px',

              padding: '8px',

              border: error ? '2px solid red' : '1px solid gray'

            }}

          />

        </label>

      </div>

      

      {/* Mostrar error si existe */}

      {error && <p style={{ color: 'red' }}>{error}</p>}

      

      {/* Mostrar el email en tiempo real */}

      <p>Email ingresado: {email || '(vacío)'}</p>

      

      <button 

        type="submit"

        disabled={!!error || !email}

        style={{

          padding: '10px 20px',

          backgroundColor: error || !email ? '#ccc' : '#4CAF50',

          color: 'white',

          border: 'none',

          cursor: error || !email ? 'not-allowed' : 'pointer'

        }}

      >

        Registrarse

      </button>

    </form>

  );

}

export default FormularioConValidacion;

🎨 Ejemplo 3: Input con Características Adicionales

jsx

import React, { useState } from 'react';

function InputAvanzado() {

  const [usuario, setUsuario] = useState({

    nombre: '',

    contrasena: '',

    mostrarPassword: false

  });

  const manejarCambio = (e) => {

    const { name, value } = e.target;

    setUsuario(prev => ({

      ...prev,

      [name]: value

    }));

  };

  const toggleMostrarPassword = () => {

    setUsuario(prev => ({

      ...prev,

      mostrarPassword: !prev.mostrarPassword

    }));

  };

  const manejarEnvio = (e) => {

    e.preventDefault();

    console.log('Usuario:', usuario);

    alert(`Nombre: ${usuario.nombre}\nContraseña oculta por seguridad`);

  };

  return (

    <form onSubmit={manejarEnvio} style={styles.formulario}>

      <h2>Registro de Usuario</h2>

      

      {/* Input para nombre */}

      <div style={styles.grupo}>

        <label style={styles.label}>

          Nombre completo:

        </label>

        <input

          name="nombre"

          type="text"

          value={usuario.nombre}

          onChange={manejarCambio}

          placeholder="Tu nombre"

          style={styles.input}

          maxLength={50}

        />

        <small style={styles.contador}>

          {usuario.nombre.length}/50 caracteres

        </small>

      </div>

      

      {/* Input para contraseña */}

      <div style={styles.grupo}>

        <label style={styles.label}>

          Contraseña:

        </label>

        <div style={{ display: 'flex', alignItems: 'center' }}>

          <input

            name="contrasena"

            type={usuario.mostrarPassword ? "text" : "password"}

            value={usuario.contrasena}

            onChange={manejarCambio}

            placeholder="Tu contraseña"

            style={styles.input}

          />

          <button

            type="button"

            onClick={toggleMostrarPassword}

            style={styles.botonToggle}

          >

            {usuario.mostrarPassword ? "🙈" : "👁️"}

          </button>

        </div>

      </div>

      

      {/* Botón de envío */}

      <button 

        type="submit"

        style={styles.botonEnviar}

        disabled={!usuario.nombre || !usuario.contrasena}

      >

        Crear cuenta

      </button>

      

      {/* Vista previa */}

      <div style={styles.vistaPrevia}>

        <h4>Vista previa:</h4>

        <p><strong>Nombre:</strong> {usuario.nombre || '(sin nombre)'}</p>

        <p><strong>Contraseña:</strong> {usuario.contrasena ? '••••••' : '(sin contraseña)'}</p>

      </div>

    </form>

  );

}

// Estilos en objeto JavaScript

const styles = {

  formulario: {

    maxWidth: '400px',

    margin: '0 auto',

    padding: '20px',

    border: '1px solid #ddd',

    borderRadius: '8px',

    backgroundColor: '#f9f9f9'

  },

  grupo: {

    marginBottom: '20px'

  },

  label: {

    display: 'block',

    marginBottom: '5px',

    fontWeight: 'bold'

  },

  input: {

    width: '100%',

    padding: '10px',

    border: '1px solid #ccc',

    borderRadius: '4px',

    fontSize: '16px'

  },

  contador: {

    display: 'block',

    textAlign: 'right',

    color: '#666',

    marginTop: '5px'

  },

  botonToggle: {

    marginLeft: '10px',

    padding: '10px',

    backgroundColor: '#007bff',

    color: 'white',

    border: 'none',

    borderRadius: '4px',

    cursor: 'pointer'

  },

  botonEnviar: {

    width: '100%',

    padding: '12px',

    backgroundColor: '#28a745',

    color: 'white',

    border: 'none',

    borderRadius: '4px',

    fontSize: '16px',

    cursor: 'pointer',

    opacity: 1

  },

  vistaPrevia: {

    marginTop: '20px',

    padding: '15px',

    backgroundColor: '#e9ecef',

    borderRadius: '4px'

  }

};

export default InputAvanzado;

📚 Resumen de Conceptos Clave

1. Componente Controlado vs No Controlado

• Controlado: React maneja el valor (recomendado)

• jsx

• <input value={estado} onChange={manejarCambio} />

• No controlado: El DOM maneja el valor

• jsx

• <input defaultValue="valor inicial" />

2. Flujo de Datos

text

Usuario escribe → evento onChange → actualiza estado → se rerenderiza → input muestra nuevo valor

3. Eventos Principales

• onChange: Cuando el valor cambia

• onSubmit: Cuando se envía el formulario

• onFocus: Cuando el input recibe foco

• onBlur: Cuando el input pierde foco

4. Tipos de Input Comunes

jsx

<input type="text" />     // Texto normal

<input type="email" />    // Email

<input type="password" /> // Contraseña

<input type="number" />   // Números

<input type="date" />     // Fecha

<textarea />              // Texto multilínea

🚀 Ejemplo Final: Todo en Uno

jsx

import React, { useState } from 'react';

function FormularioTodoUno() {

  const [input, setInput] = useState('');

  

  const manejarCambio = (e) => setInput(e.target.value);

  

  const manejarEnvio = (e) => {

    e.preventDefault();

    alert(`Texto guardado: ${input}`);

    setInput('');

  };

  

  return (

    <div style={{ textAlign: 'center', marginTop: '50px' }}>

      <h1>🖊️ Formulario Simple en React</h1>

      

      <form onSubmit={manejarEnvio}>

        <input

          type="text"

          value={input}

          onChange={manejarCambio}

          placeholder="Escribe algo increíble..."

          style={{

            padding: '15px',

            fontSize: '18px',

            width: '300px',

            marginBottom: '20px'

          }}

        />

        <br />

        <button

          type="submit"

          style={{

            padding: '15px 30px',

            fontSize: '16px',

            backgroundColor: '#2196F3',

            color: 'white',

            border: 'none',

            borderRadius: '5px',

            cursor: 'pointer'

          }}

        >

          Guardar ✨

        </button>

      </form>

      

      <div style={{ marginTop: '30px' }}>

        <h3>🎯 Lo que escribes aparece aquí:</h3>

        <div style={{

          padding: '20px',

          backgroundColor: '#e3f2fd',

          borderRadius: '5px',

          minHeight: '50px',

          fontSize: '20px',

          fontWeight: 'bold'

        }}>

          {input || '¡Empieza a escribir arriba!'}

        </div>

      </div>

    </div>

  );

}

export default FormularioTodoUno;

✅ Mejores Prácticas

1. Siempre usar preventDefault() en el submit

2. Validar datos antes de enviar

3. Dar feedback visual al usuario

4. Usar htmlFor y id para accesibilidad

5. Manejar estados de carga y error

🎓 Ejercicio para Practicar

Crea un input donde:

1. Cuente las palabras escritas

2. Cambie de color cuando tenga más de 10 caracteres

3. Muestre un mensaje especial cuando diga "React"

¡Ahora tienes las bases para manejar formularios en React!

—------------------------------------

Exactamente, has identificado un patrón fundamental en React: levantar el estado (lifting state up). El ejemplo que muestras tiene el estado local dentro del componente FormularioBasico, pero en aplicaciones reales es común mover ese estado al componente padre. Esto permite:

¿Por qué mover el estado al padre?

1. Compartir datos entre componentes hermanos

2. Mantener una única fuente de verdad

3. Facilitar la comunicación entre componentes

4. Centralizar la lógica de negocio

Ejemplo con Estado en el Padre

jsx

// Componente PADRE

import React, { useState } from 'react';

import Formulario from './Formulario';

import Mostrador from './Mostrador';

function App() {

  // Estado ahora está en el padre

  const [texto, setTexto] = useState('');

  const [historico, setHistorico] = useState([]);

  // Función para actualizar el texto

  const manejarCambio = (nuevoTexto) => {

    setTexto(nuevoTexto);

  };

  // Función para manejar el envío

  const manejarEnvio = () => {

    if (texto.trim()) {

      setHistorico([...historico, texto]);

      setTexto('');

    }

  };

  return (

    <div>

      {/* Paso el estado y funciones como props */}

      <Formulario

        texto={texto}

        onCambio={manejarCambio}

        onEnvio={manejarEnvio}

      />

      

      {/* Otro componente que también necesita acceso al texto */}

      <Mostrador texto={texto} historico={historico} />

    </div>

  );

}

export default App;

jsx

// Componente HIJO (Formulario.jsx)

import React from 'react';

function Formulario({ texto, onCambio, onEnvio }) {

  const manejarSubmit = (e) => {

    e.preventDefault();

    onEnvio();

  };

  return (

    <form onSubmit={manejarSubmit}>

      <label>

        Escribe algo:

        <input

          type="text"

          value={texto}

          onChange={(e) => onCambio(e.target.value)}

          placeholder="Escribe aquí..."

        />

      </label>

      <button type="submit">Enviar</button>

    </form>

  );

}

export default Formulario;

Ventajas de este enfoque:

Ventaja	Descripción
Reutilización	El componente formulario puede usarse en múltiples lugares
Separación de preocupaciones	El formulario solo maneja UI, la lógica está en el padre
Testing más fácil	Se puede testear la lógica y la UI por separado
Escalabilidad	Fácil agregar validaciones, side effects, etc.

¿Cuándo usar cada enfoque?

Estado local (tu ejemplo):

• Componentes pequeños y aislados

• Formularios independientes

• Prototipos rápidos

• Estado que no necesita ser compartido

Estado en el padre:

• Datos que varios componentes necesitan

• Formularios que afectan otras partes de la UI

• Aplicaciones con múltiples componentes interconectados

• Cuando necesitas pasar datos a componentes hermanos

Patrón intermedio: Formulario controlado

jsx

// El formulario maneja UI, pero recibe valor y callbacks del padre

function FormularioControllado({ value, onChange, onSubmit }) {

  return (

    <form onSubmit={onSubmit}>

      <input

        type="text"

        value={value}

        onChange={(e) => onChange(e.target.value)}

      />

      <button type="submit">Enviar</button>

    </form>

  );

}

Conclusión: Tu ejemplo es perfecto para entender los conceptos básicos, pero en aplicaciones reales, efectivamente se suele "levantar el estado" al componente padre para mejor arquitectura y mantenibilidad.