Как я могу изменить шаг от дочернего компонента? - PullRequest
Новая
       45

Как я могу изменить шаг от дочернего компонента?

1 голос
/ 26 февраля 2020

Я хотел бы отображать различные компоненты в степпере, не используя кнопки classi c previous / next.

Я начал использовать степпер пользовательского интерфейса материала classi c в качестве примера, но теперь я ' Мне интересно, как мне удается добавить кнопку в моем компоненте PlanSelection, чтобы перейти к следующему шагу? 

function getSteps() {
  return ['Plan', 'Date', 'Informations', 'Payment'];
}


function getStepContent(step) {
  switch (step) {
    case 0:
      return <PlanSelection />;
    case 1:
      return <DateSelection />;
    case 2:
      return <InformationsCustomer />;
    case 3:
      return <SummaryPayment />;
    default:
      return 'Unknown step';
  }
}

export default function CustomizedSteppers() {
  const classes = useStyles();
  const [activeStep, setActiveStep] = React.useState(0);
  const steps = getSteps();

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

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


  return (
    <Grid className={classes.root}>
      <Stepper alternativeLabel activeStep={activeStep} connector={<ColorlibConnector />}>
        {steps.map(label => (
          <Step key={label}>
            <StepLabel StepIconComponent={ColorlibStepIcon}>
              {label}
            </StepLabel>
          </Step>
        ))}
      </Stepper>


     <Grid>{getStepContent(activeStep)}</Grid>

    </Grid>
  );
}

1 Ответ

0 голосов
/ 26 февраля 2020

Мне просто нужно передать реквизиты для компонента моего желания 

return <PlanSelection handleBack={handleBack} handleNext={handleNext} />;

Затем в PlanSelection.js, 

const PlanSelection = (props) => {

const { handleBack, handleNext,t } = props;
...