¿Cómo crear un formulario en React?

React utiliza formularios para permitir a los usuarios interactuar con la página web. En React, los datos del formulario generalmente son manejados por los componentes. Cuando los datos son manejados por los componentes, todos los datos se almacenan en el estado del componente. Puede controlar los cambios agregando controladores de eventos en el atributo onChange y ese controlador de eventos se usará para actualizar el estado de la variable.

Pasos de configuración:

Cree una carpeta escribiendo ‘Nombre de la carpeta mkdir’ en su terminal del símbolo del sistema.

mkdir forms

Ahora, navegue a la carpeta de formularios escribiendo los siguientes comandos en el terminal del símbolo del sistema.

cd forms

Cree un proyecto React escribiendo ‘npx create-react-app <nombre de la carpeta>’ en la ventana del símbolo del sistema:

npx create-react-app form

Ahora, navegue a la carpeta ‘formulario’ escribiendo los siguientes comandos en el terminal del símbolo del sistema.

cd form

Escriba el siguiente comando para ejecutar su proyecto en el navegador localhost: 3000

npm start

Ejemplo: Cree un formulario de registro usando React solicitando nombre de usuario, edad, correo electrónico, contraseña y confirmación de contraseña. Cuando el usuario haga clic en el botón ‘enviar’, se mostrará un cuadro de alerta con un nombre de usuario, edad y detalles de correo electrónico ingresados ​​por el usuario.

Explicación del código:

Paso 1: en el componente de función ‘Aplicación’, inicializamos el nombre, el correo electrónico, la contraseña y confirmamos el estado de la contraseña en un valor vacío mediante el gancho ‘useState’.

Paso 2: cuando el usuario escribe en el cuadro de entrada de nombre, la función ‘handleChange()’ será el disparador que actualizará el estado de la variable de nombre con la ayuda de la variable ‘setName’.

Paso 3: De manera similar, cuando el usuario escribe en el cuadro de entrada de edad, la función ‘handleAgeChange()’ será el disparador que actualizará el estado de la variable de edad con la ayuda de la variable ‘setAge’.

Paso 4: De manera similar, cuando el usuario escribe en el cuadro de entrada de correo electrónico, la función ‘handleEmailChange()’ será el disparador que actualizará el estado de la variable de correo electrónico con la ayuda de la variable ‘setEmail’.

Paso 5: De manera similar, cuando el usuario escribe en el cuadro de entrada de contraseña, la función ‘handlePasswordChange()’ será el disparador que actualizará el estado de la variable de contraseña con la ayuda de la variable ‘setPassword’.

Paso 6: De manera similar, cuando el usuario escribe en el cuadro de entrada de la contraseña de confirmación, la función ‘handleConfPasswordChange()’ será el activador que actualizará el estado de la variable confPassword con la ayuda de la variable ‘setConfPassword’.

Paso 7: cuando el usuario envíe el formulario, se activará la función ‘handleSubmit()’, que verificará si ‘contraseña’ y ‘confirmar contraseña’ son iguales o no si la contraseña es la misma, se mostrará un cuadro de alerta con detalles ingresados ​​por el usuario en el formulario y si la contraseña no es la misma, se mostrará un cuadro de alerta con el mismo motivo.

Ejemplo:

Nombre de archivo: App.js

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import './App.css';
 
function App() {
    const [name , setName] = useState('');
    const [age , setAge] = useState('');
    const [email , setEmail] = useState('');
    const [password , setPassword] = useState('');
    const [confPassword , setConfPassword] = useState('');
 
    // function to update state of name with
    // value enter by user in form
    const handleChange =(e)=>{
      setName(e.target.value);
    }
    // function to update state of age with value
    // enter by user in form
    const handleAgeChange =(e)=>{
      setAge(e.target.value);
    }
    // function to update state of email with value
    // enter by user in form
    const handleEmailChange =(e)=>{
      setEmail(e.target.value);
    }
      // function to update state of password with
      // value enter by user in form
    const handlePasswordChange =(e)=>{
      setPassword(e.target.value);
    }
      // function to update state of confirm password
      // with value enter by user in form
    const handleConfPasswordChange =(e)=>{
      setConfPassword(e.target.value);
    }
    // below function will be called when user
    // click on submit button .
    const handleSubmit=(e)=>{
      if(password!=confPassword)
      {
        // if 'password' and 'confirm password'
        // does not match.
        alert("password Not Match");
      }
      else{
        // display alert box with user
        // 'name' and 'email' details .
        alert('A form was submitted with Name :"' + name +
        '" ,Age :"'+age +'" and Email :"' + email + '"');
      }
      e.preventDefault();
 
    }
  return (
    <div className="App">
    <header className="App-header">
    <form onSubmit={(e) => {handleSubmit(e)}}>
     {/*when user submit the form , handleSubmit()
        function will be called .*/}
    <h2> Geeks For Geeks </h2>
    <h3> Sign-up Form </h3>
    <img src="/gfg.png" />
        <label >
          Name:
        </label><br/>
        <input type="text" value={name} required onChange={(e)
              => {handleChange(e)}} /><br/>
          { /*when user write in name input box , handleChange()
              function will be called. */}
        <label >
          Age:
        </label><br/>
        <input type="text" value={age} required onChange={(e)
               => {handleAgeChange(e)}} /><br/>
            { /*when user write in age input box , handleAgeChange()
               function will be called. */}
        <label>
          Email:
        </label><br/>
        <input type="email" value={email} required onChange={(e)
                => {handleEmailChange(e)}} /><br/>
          {/* when user write in email input box , handleEmailChange()
              function will be called.*/}
        <label>
          Password:
        </label><br/>
        <input type="password" value={password} required onChange={(e)
               => {handlePasswordChange(e)}} /><br/>
              {/* when user write in password input box ,
                  handlePasswordChange() function will be called.*/}
        <label>
          Confirm Password:
        </label><br/>
        <input type="password" value={confPassword} required onChange={(e)
               => {handleConfPasswordChange(e)}} /><br/>
                {/* when user write in confirm password  input box ,
                    handleConfPasswordChange() function will be called.*/}
        <input type="submit" value="Submit"/>
      </form>
    </header>
    </div>
  );
}
 
export default App;

Nombre de archivo: App.css, el archivo que se proporciona a continuación contiene la propiedad CSS. Este archivo se guarda con una extensión .css.

.App {
   text-align: center;
}
form {
  border:2px solid green;
  padding: 30px;
}
img{
  height: 120px;
  margin-left: 90px;
  margin-bottom: 10px;
  display: block;
  border:1px solid black;
  border-radius: 50%;
}
.App-header {
  background-color: white;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: black;
}

Producción:

Cuando el usuario hace clic en el botón Enviar, muestra un cuadro de alerta con un nombre de usuario, edad y detalles de correo electrónico ingresados ​​por el usuario en el formulario:

Vista de página completa:

Cuando ‘contraseña’ y ‘confirmar contraseña’ en un formulario no coinciden, se mostrará un cuadro de alerta con el mensaje ‘contraseña no coincide’.

Si algún campo del formulario (nombre, edad, contraseña y confirmar contraseña) está vacío, el atributo ‘requerido’ impide que se envíe este formulario: