Formularios nativos en react

Introduccion

¡Hola! Agradezco que estés leyendo este post. En esta ocasión, partiremos del supuesto de que ya cuentas con un proyecto de React con Bootstrap. Si aún no lo tienes o necesitas ayuda, puedes consultar esta entrada para crear tu proyecto de React + Vite y esta otra para agregar Bootstrap. Si ya estás familiarizado con estos conceptos o ya posees un proyecto como punto de partida, ¡adelante!

Punto de partida

Partiremos con la siguiente estructura básica de código, la cual se fundamenta en una serie de etiquetas y clases de Bootstrap para estilizar nuestro formulario.

<div className='d-flex justify-content-center align-items-center vh-100'>
    <div className="row">
      <h3>Login</h3>
      <form>
        <div className="mb-3">
          <label htmlFor="emailInput" className="form-label">Email</label>
          <input
            type="email"
            className="form-control"
            id="emailInput"
          />
        </div>
        <div className="mb-3">
          <label htmlFor="passwordInput" className="form-label">Password</label>
          <input
            type="password"
            className="form-control"
            id="passwordInput"
          />
        </div>
        <button type="submit" className="btn btn-primary">Enviar</button>
      </form>

    </div>
  </div>

Considera que los inputs están dentro de un formform y que el botón de enviar está dentro del mismo, siendo de tipo submit para que al hacer clic en él se envíe el formulario. Actualmente, no tiene ninguna funcionalidad, pero sirve como el esqueleto para lo que sigue.

Agregando funcionalidad al formulario

Como comentamos al principio de esta entrada, en Bootstrap puedes manejar los formularios de distintas formas, pero hoy aprenderás a realizarlo de forma nativa. Empezaremos por agregar un useState para manejar el estado de los inputs y algunos eventos.

1. Estado del formulario

Agregaremos el siguiente bloque para poder gestionar el estado de los inputs y el estado del formulario.

...
    const [formulario, setFormulario] = useState({
        email: '',
        password: ''
      });
    ...

Observa cómo el estado manejará un objeto con dos propiedades, email y password, que serán los valores de los inputs.

2. Manejador de eventos input

Agregaremos el siguiente bloque para poder manejar el evento de cada input

...
const handleInputChange = (event) => {
    setFormulario({
      ...formulario,
      [event.target.name]: event.target.value
    })
  };
...

Observa cómo el evento onChange se encarga de gestionar el cambio de cada input y asignarlo al estado del formulario de manera dinámica. Esto es un formato genérico que puedes replicar en cada proyecto donde necesites usar un formulario.

3. Manejador de evento Submit

Agregaremos el siguiente bloque para poder gestionar el evento de envío del formulario. Este evento será utilizado en el submit del formulario.

...
    const handleSubmit = (event) => {
        event.preventDefault();
        console.log(formulario);
      };
...

Observa cómo utilizamos event.preventDefault() para evitar que el formulario se envíe de forma nativa y poder manejarlo con nuestro código. En este caso, solo imprimimos el estado del formulario en la consola mediante console.log(formulario).

Dando como resultado algo parecido a la siguiente imagen si quisieramos cambiar de base de datos podemos usar el comando quie ya vimos use nombre_base_de_datos

4. Ajustando nuestro formulario

Ha llegado el momento de ajustar nuestro formulario para que funcione con el código que acabamos de ver. Para esto, agregaremos los siguientes cambios.

<div className='d-flex justify-content-center align-items-center vh-100'>
    <div className="row">
      <h3>Login</h3>
      <form onSubmit={handleSubmit}>
        <div className="mb-3">
          <label htmlFor="emailInput" className="form-label">Email</label>
          <input
            type="email"
            className="form-control"
            id="emailInput"
            onChange={handleInputChange}
            value={formulario.email}
            name='email'
          />
        </div>
        <div className="mb-3">
          <label htmlFor="passwordInput" className="form-label">Password</label>
          <input
            type="password"
            className="form-control"
            id="passwordInput"
            onChange={handleInputChange}
            value={formulario.password}
            name='password'
          />
        </div>
        <button type="submit" className="btn btn-primary">Enviar</button>
      </form>

    </div>
  </div>

Lista de cambios

• Línea 4: Agregamos el evento onSubmit al formulario y le asignamos la funcion handleSubmit que creamos anteriormente.
• Línea 7: en el input del email agregamos el evento onChange y le asignamos la funcion handleInputChange que creamos anteriormente. Ademas agregamos el valor del input con value y el nombre del input con name.
• Línea 18: en el input del password agregamos el evento onChange y le asignamos la funcion handleInputChange que creamos anteriormente. Ademas agregamos el valor del input con value y el nombre del input con name.

Importante notar que el nombre(name0) del input es el mismo que el nombre de la propiedad del estado del formulario y el valor(value) del input es el mismo que el valor de la propiedad del estado del formulario, esto es para que el estado del formulario se actualice de manera dinamica.

Resultado final

Si probamos nuestro formulario y capturamos algunos valores en los inputs, al dar click en enviar, notaremos cómo en la consola aparecen los valores capturados, indicando que tenemos la información lista para ser enviada a alguna API si es necesario.

iGeek0/react-form

Revisa el repositorio de github para ver el codigo completo de esta entrada.