Diseñando un formulario paso a paso en ReactJS

Los motores paso a paso muestran el progreso a través de una secuencia de pasos lógicos y numerados. También se pueden utilizar para la navegación. Los steppers pueden mostrar un mensaje de retroalimentación transitorio después de guardar un paso.

En este artículo, aprenderemos cómo crear un formulario paso a paso vertical usando react y material-ui. Crearemos un paso a paso vertical y le agregaremos un contenedor de formulario. En todas las etapas de la forma paso a paso, agregaremos diferentes detalles. Es como si tuviera diferentes etapas para completar el formulario y después de completar todos los pasos llegará a la final.

Creando la aplicación React

Paso 1: Cree la aplicación de reacción usando el siguiente comando.

npx create-react-app my-first-app

Paso 2: cambie el directorio a esa carpeta ejecutando el comando:

cd my-first-app

Paso 3: Instala las dependencias necesarias. Vaya al directorio ‘src’ y ejecute el símbolo del sistema allí y ejecute el comando

npm install @material-ui/core/Stepper
npm install @material-ui/core/Step
npm install @material-ui/core/StepLabel

Estructura del archivo: Se verá como lo siguiente.

Paso 4:  Importación del componente < GeekStepper/> en el componente raíz.

import GeekStepper from './StepperForm'
function App() {
  return (
    <div className="App">
      <GeekStepper />
    </div>
  );
}
  
export default App;

Paso 5: en este archivo, implementaremos el formulario paso a paso para enviar detalles personales, detalles de educación y dirección de un usuario. Stepper se crea usando material-ui en reaccionar. Hemos importado diferentes clases de interfaz de usuario en este componente como Stepper, StepLabel, etc. 

El formulario se implementa utilizando el paso proactivo y ActiveStep. Estos pasos se utilizan para mostrar el componente del formulario que está activo y volver atrás.

import React from 'react';
import { makeStyles, Theme, createStyles } 
        from '@material-ui/core/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import StepContent from '@material-ui/core/StepContent';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
  
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      width: '100%',
    },
    button: {
      marginTop: theme.spacing(1),
      marginRight: theme.spacing(1),
    },
    actionsContainer: {
      marginBottom: theme.spacing(2),
    },
    resetContainer: {
      padding: theme.spacing(3),
    },
      
  }),
);
  
function getSteps() {
  return [<b style={{color:'purple'}}>'Enter Personal Details'</b>, 
  <b style={{color:'purple'}}>'Enter Education Details'</b>, 
  <b style={{color:'purple'}}>'Enter Address'</b>];
}
  
function getStepContent(step: number) {
  switch (step) {
    case 0:
      return (
        <form class="form-group">
        <label>First Name</label>
        <input type="text" placeholder="First Name"></input>
        <br></br>
        <label>Last Name</label>
        <input type="text" placeholder="Last Name"></input>
        </form>
      );
    case 1:
      return (
        <form class="form-group">
        <label>High School Percentage</label>
        <input type="number" placeholder="High School Percentage"></input>
        <br></br>
        <label>Graduation percentage</label>
        <input type="number" placeholder="Graduation Percentage"></input>
        </form>
      );
    case 2:
      return (
        <form class="form-group">
        <label>Permanent Address</label>
        <input type="text" placeholder="Permanent Address"></input>
        <br></br>
        <label>Temporary Address</label>
        <input type="text" placeholder="Temporary Address"></input>
        </form>
      );
    default:
      return 'Unknown step';
  }
}
  
export default function GeekStepper() {
  const classes = useStyles();
  const [activeStep, setActiveStep] = React.useState(0);
  const steps = getSteps();
  
  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };
  
  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };
  
  const handleReset = () => {
    setActiveStep(0);
  };
  
  return (
    <div className={classes.root}>
      <h1>GeeksforGeeks Stepper Form</h1>
      <Stepper activeStep={activeStep} orientation="vertical">
        {steps.map((label, index) => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
            <StepContent>
              <Typography>{getStepContent(index)}</Typography>
              <div className={classes.actionsContainer}>
                <div>
                  <Button
                    disabled={activeStep === 0}
                    onClick={handleBack}
                    className={classes.button}
                  >
                    Back
                  </Button>
                  <Button
                    variant="contained"
                    color="primary"
                    onClick={handleNext}
                    className={classes.button}
                  >
                    {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
                  </Button>
                </div>
              </div>
            </StepContent>
          </Step>
        ))}
      </Stepper>
      {activeStep === steps.length && (
        <Paper square elevation={0} className={classes.resetContainer}>
          <Typography>Form is submitted</Typography>
          <Button onClick={handleReset} className={classes.button}>
            Reset
          </Button>
        </Paper>
      )}
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute su aplicación ejecutando el siguiente comando en src

npm start

Producción: