10-4-formulario

 Explicación Detallada del Código de Formulario de Contacto

Este código muestra un patrón común en React donde separamos un formulario en componentes independientes que se comunican a través de props. Vamos a analizarlo en profundidad:

Estructura General del Código

javascript

Copy

Download

// App.js - Componente principal
function App() {
  const [formData, setFormData] = useState({});

  const handleSubmit = (data) => {
    console.log("Datos enviados:", data);
    setFormData(data);
  };

  return (
    <div>
      <FormularioContacto onSubmit={handleSubmit} />
      <DatosEnviados data={formData} />
    </div>
  );
}

// FormularioContacto.js - Componente del formulario
function FormularioContacto({ onSubmit }) {
  const [input, setInput] = useState("");

  const enviar = (e) => {
    e.preventDefault();
    onSubmit({ email: input });
  };

  return (
    <form onSubmit={enviar}>
      <input 
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button type="submit">Enviar</button>
    </form>
  );
}

Flujo de Datos (Diagrama Conceptual)

Copy

Download

[Usuario escribe] → [Input] → [FormularioContacto] → [App] → [DatosEnviados]

Explicación Paso a Paso

1. Componente App (Padre)

javascript

Copy

Download

const [formData, setFormData] = useState({});

• formData: Estado que almacenará los datos enviados desde el formulario

• Inicializado como objeto vacío {}

javascript

Copy

Download

const handleSubmit = (data) => {
  console.log("Datos enviados:", data);
  setFormData(data);
};

• handleSubmit: Función que recibe los datos del formulario hijo

• Hace dos cosas:

  1. Muestra los datos en consola

  2. Actualiza el estado formData con los nuevos datos

jsx

Copy

Download

<FormularioContacto onSubmit={handleSubmit} />

• Pasa la función handleSubmit como prop onSubmit al componente hijo

jsx

Copy

Download

<DatosEnviados data={formData} />

• Pasa los datos del formulario al componente que los mostrará

2. Componente FormularioContacto (Hijo)

javascript

Copy

Download

function FormularioContacto({ onSubmit }) {

• Recibe la prop onSubmit del componente padre

javascript

Copy

Download

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

• input: Estado local para manejar el valor del campo de email

javascript

Copy

Download

const enviar = (e) => {
  e.preventDefault();
  onSubmit({ email: input });
};

• enviar: Función que se ejecuta al enviar el formulario

  1. Previene el comportamiento por defecto del formulario

  2. Llama a onSubmit (la función del padre) con los datos en formato objeto

jsx

Copy

Download

<input 
  value={input}
  onChange={(e) => setInput(e.target.value)}
/>

• Input controlado:

  • value está vinculado al estado input

  • onChange actualiza el estado con cada cambio

Ventajas de esta Estructura

1. Separación de responsabilidades:

   • FormularioContacto solo maneja la entrada de datos

   • App maneja el estado global y la lógica de envío

2. Reutilización:

   • El formulario puede usarse en diferentes partes de la aplicación

   • Puede recibir diferentes funciones onSubmit

3. Mantenibilidad:

   • Cambios en el formulario no afectan la lógica principal

   • Fácil de extender (añadir más campos, validaciones, etc.)

Ejemplo de Flujo Completo

1. Usuario escribe "ejemplo@mail.com" en el input

2. onChange actualiza el estado input en FormularioContacto

3. Usuario hace click en Enviar

4. Se ejecuta enviar:

   • Previene recarga de página

   • Llama a onSubmit({ email: "ejemplo@mail.com" })

5. App recibe los datos:

   • Muestra en consola

   • Actualiza formData a { email: "ejemplo@mail.com" }

6. DatosEnviados recibe los nuevos datos y los muestra

Posibles Mejoras

1. Validación de email:

javascript

Copy

Download

const enviar = (e) => {
  e.preventDefault();
  if (!input.includes('@')) {
    alert('Ingrese un email válido');
    return;
  }
  onSubmit({ email: input });
};

2. Múltiples campos:

javascript

Copy

Download

// En FormularioContacto
const [form, setForm] = useState({
  email: '',
  nombre: '',
  telefono: ''
});

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

3. Feedback visual:

javascript

Copy

Download

const [enviado, setEnviado] = useState(false);

// Después de onSubmit
setEnviado(true);
setTimeout(() => setEnviado(false), 2000);