React useForm Hook

ReactReactBeginner
Practicar Ahora

This tutorial is from open-source community. Access the source code

💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí

Introducción

En este laboratorio, aprenderemos a usar el hook useForm en React para crear un valor con estado a partir de los campos de un formulario. Esto nos permitirá manejar fácilmente el estado de nuestras entradas de formulario y actualizarlas según sea necesario. Al final de este laboratorio, tendrás una mejor comprensión de cómo crear y manejar formularios en React usando el hook useForm.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react(("React")) -.-> react/StateManagementGroup(["State Management"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/event_handling("Handling Events") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StateManagementGroup -.-> react/use_state_reducer("Using useState and useReducer") subgraph Lab Skills react/jsx -.-> lab-38385{{"React useForm Hook"}} react/event_handling -.-> lab-38385{{"React useForm Hook"}} react/hooks -.-> lab-38385{{"React useForm Hook"}} react/use_state_reducer -.-> lab-38385{{"React useForm Hook"}} end

React useForm Hook

index.html y script.js ya se han proporcionado en la máquina virtual. En general, solo es necesario agregar código a script.js y style.css.

Para crear un valor con estado a partir de los campos de un formulario, puedes usar el hook useState() para crear una variable de estado para los valores en el formulario. Luego, crea una función que actualice la variable de estado en función del evento adecuado desencadenado por un campo de formulario.

A continuación, se muestra una implementación de ejemplo:

const useForm = (initialValues) => {
  const [values, setValues] = React.useState(initialValues);

  return [
    values,
    (e) => {
      setValues({
        ...values,
        [e.target.name]: e.target.value
      });
    }
  ];
};

En el ejemplo anterior, useForm() toma un objeto de estado inicial, crea una variable de estado values usando useState() y devuelve un array con values y una función que actualiza values en función del evento que se le pasa.

Puedes usar useForm() en un componente de formulario de la siguiente manera:

const Form = () => {
  const initialState = { email: "", password: "" };
  const [values, setValues] = useForm(initialState);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(values);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" onChange={setValues} />
      <input type="password" name="password" onChange={setValues} />
      <button type="submit">Submit</button>
    </form>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<Form />);

En el componente Form, useForm() se llama con un objeto de estado inicial y devuelve un array con values y setValues(). La función handleSubmit() registra el objeto values en la consola cuando se envía el formulario. Los elementos input se configuran para actualizar los valores del formulario usando la función setValues().

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio del hook React useForm. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.