Reactjs 如何从子组件更改步骤？

我想在步进机中显示不同的组件，而不使用经典的“上一步/下一步”按钮

我开始使用经典材质UI stepper作为示例，但现在我想知道如何在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>
  );
}

函数getSteps（）{ 返回[‘计划’、‘日期’、‘信息’、‘付款’]； } 函数getStepContent（步骤）{ 开关（步骤）{ 案例0： 返回； 案例1： 返回； 案例2： 返回； 案例3： 返回； 违约： 返回“未知步骤”； } } 导出默认函数CustomizedSteppers（）{ const classes=useStyles（）； const[activeStep，setActiveStep]=React.useState（0）； const steps=getSteps（）； 常量handleNext=（）=>{ setActiveStep（prevActiveStep=>prevActiveStep+1）； }; 常量把手=（）=>{ setActiveStep（prevActiveStep=>prevActiveStep-1）； }; 返回( {steps.map（标签=>( {label} ))} {getStepContent（activeStep）} ); }

---

我只需要将道具传递给我的欲望组件

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

---

我只需要把道具传给我的欲望组件

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

---

亲爱的@Stompy，欢迎来到Stack Overflow。你们问得好，我给你们的动机投了一票。祝你好运。嗨，亲爱的@Stompy，欢迎来到Stack Overflow。你们问得好，我给你们的动机投了一票。祝你好运