Блог

Я хочу создать шаговый механизм, в котором вы можете обрабатывать текст и выполнять обратную связь в метке шага как onClickEvent. Я понятия не имею, как это сделать.

вот песочница: https://codesandbox.io/s/stepper-forked-2q1wd

 export default function IndexPage() {
  const [activeStep, setActiveStep] = useState(0);

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep   1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  function getStepsContent(stepIndex) {
    switch (stepIndex) {
      case 0:
        return <h1>adsf</h1>;
      case 1:
        return <h1>adsf</h1>;
      case 2:
        return <h1>adsf</h1>;
    }
  } 
const steps = getSteps();
  return (
    <>
      <div>
        <Stepper
          alternativeLabel
          activeStep={activeStep}
          connector={<ColorlibConnector />}
        >
          {steps.map((label) => (
            <Step key={label}>
              <StepLabel
                onClick={handleNext}
                StepIconComponent={ColorlibStepIcon}
              >
                {label}
              </StepLabel>
            </Step>
          ))}
        </Stepper>
      </div>
      <br />

      <div>
        {getStepsContent(activeStep)}

       
        {activeStep === steps.length ? (
          "Bewerbung abgesendet"
        ) : (
          <div style={{ display: "flex", justifyContent: "center" }}>
            <div>
              <Button
                variant="outlined"
                color="primary"
                onClick={handleBack}
                disabled={activeStep === 0}
              >
               {activeStep > 0 ? "Zurück" : null}
              </Button>

              <Button
                style={{ color: "white", margin: 30 }}
                variant="contained"
                color="primary"
                onClick={handleNext}
              >
                {activeStep === steps.length - 1 ? "Absenden" : "Weiter"}
              </Button>
            </div>
          </div>
        )}
      </div>
    </>
  );
}
 

Я только что добавил функцию handleNext в качестве onClick, но я также хочу вернуться, нажав на шаг.

Вы можете использовать индекс для задания шагов. замените свой onClick на свой StepLabel с помощью этого

 {steps.map((label, index) => (
            <Step key={label}>
              <StepLabel
                onClick={() => setActiveStep(index)}
                StepIconComponent={ColorlibStepIcon}
              >
                {label}
              </StepLabel>
            </Step>
         ))}
 

Исправление шаговой метки