reactjs - 如何从子组件更改步骤？

Question

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

我开始以经典材质 UI 步进器为例，但现在我想知道如何在我的 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>
  );
}

标签： reactjsmaterial-uistepper

Answer 1

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

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

然后在PlanSelection.js,

const PlanSelection = (props) => {

const { handleBack, handleNext,t } = props;