[React] Formularios

Formulario

Cree un nuevo componente denominado signup.js con el siguiente contenido:

function Signup() {
  return (
    <div>
      <form>
        <div>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            autoComplete="password"
          />
        </div>

        <div>
          <label htmlFor="password">Password</label>
          <input
            type="password"
            id="password"
            name="password"
            autoComplete="password"
          />
        </div>

        <div>
          <label htmlFor="repeat_password">Confirm password</label>
          <input
            type="password"
            id="repeat_password"
            name="repeat_password"
            autoComplete="password"
          />
        </div>
        <button type="submit">Register</button>
      </form>
    </div>
  );
}

export default Signup;

El anterior es un formulario básico de registro con tres campos y un botón.

Cree un hook para manejar el evento submit del formulario. Para esto, cree el archivo customHooks.js con el siguiente contenido:

const useSignUpForm = () => {

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("Form submitted");
  };

  return { handleSubmit };
};

export default useSignUpForm;

Este hook tiene una función que se llama cuando se realice submit al formulario.

Use el hook en el formulario. Para esto modifique el formulario así:

import useSignUpForm from "./customHooks";

function Signup() {
  const { handleSubmit } = useSignUpForm();
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            autoComplete="password"
          />
        </div>

        <div>
          <label htmlFor="password">Password</label>
          <input
            type="password"
            id="password"
            name="password"
            autoComplete="password"
          />
        </div>

        <div>
          <label htmlFor="repeat_password">Confirm password</label>
          <input
            type="password"
            id="repeat_password"
            name="repeat_password"
            autoComplete="password"
          />
        </div>
        <button type="submit">Register</button>
      </form>
    </div>
  );
}

export default Signup;