Reactjs 如何在不使用Redux的情况下使用React stepper？

我有3个组件，基本上从用户那里获取输入，并显示一个进度条。 （组件列表）

姓名，电子邮件

银行详情

地址

我正在使用react material UI步进器。每个组件都有一个不同的API来创建详细信息，单击Next按钮将继续创建。我不允许使用React-Redux，只能使用React-Context

这是Progressbar.js

     function getSteps() {
      return [
        'About your App!',
        'First User Type',
        'First Screen',
        'First Info Type',
        'First Sub Info Type'
      ];
    }
    
    
    function getStepContent(stepIndex, action, values) {
      debugger;
    
      switch (stepIndex) {
        case 0:
          return <FormAppDetails handleChange={action} values={values} />;
        case 1:
          return <UserTypeCreationForm  handleChange={action} values={values}/>;
        case 2:
          return <ScreenCreationForm handleChange={action} values={values} />;
          case 3:
          return <InfoTypeCreationForm handleChange={action} values={values} />;
          case 4:
          return <SubInfoTypeCreationForm handleChange={action} values={values} />;
        default:
          return 'Unknown stepIndex';
      }
    }
function CreateForm({
  handleChange,
  nextStep,
  hasApp,
  keyId,
  parentId,
  app,
  selected,
  refetchQueries,
  onSelect,
  customerId,
  createApp,

}){
  const classes = useStyles();
  const [activeStep, setActiveStep] = useState(0);
  const steps = getSteps();


  const values = {
    handleChange,
    nextStep,
    hasApp,
    keyId,
    parentId,
    app,
    selected,
    refetchQueries,
    onSelect,
  };
  console.log('insideee values', values);

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

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

  const handleReset = () => {
    setActiveStep(0);
  };
  debugger;

  return (
    <div className={classes.root}>
      <Container maxWidth="sm" >
      <Stepper 
      activeStep={activeStep} 
      alternativeLabel 
      className={classes.customStepper}
      connector={<CustomColorLib />}

      
      >
        {steps.map((label) => (
          <Step key={label}>
            <StepLabel
            StepIconProps={{
              classes: { root: classes.customeTheme }
            }}
          >
            
            {label}</StepLabel>
          </Step>
        ))}
      </Stepper>
      <div>
        {activeStep === steps.length ? (
          <div>
            <Typography className={classes.instructions}>All steps completed</Typography>
            <Button onClick={handleReset}>Reset</Button>
          </div>
        ) : (
          <div>
            <Typography className={classes.instructions}>{getStepContent(activeStep,handleChange,values) }</Typography>
            <div className={classes.buttonWrapper}>
           
            
              <Button 
              variant="contained" 
              onClick={handleNext} 
              className={classes.customButton} 
              
              >
                {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
              </Button>
            </div>
          </div>
        )}
      </div>

      </Container>
      
    </div>

  );

}

函数getSteps（）{ 返回[ “关于你的应用！”， “第一个用户类型”， “第一屏”， “第一信息类型”， “第一个子信息类型” ]; } 函数getStepContent（步骤索引、操作、值）{ 调试器； 开关（步进索引）{ 案例0： 返回； 案例1： 返回； 案例2： 返回； 案例3： 返回； 案例4： 返回； 违约： 返回“未知步骤索引”； } } 函数CreateForm({ handleChange， 下一步， 哈萨普， 凯伊德， 父ID， 应用程序， 挑选出来的， 参考查询， 当选， 客户ID， createApp， }){ const classes=useStyles（）； 常量[activeStep，setActiveStep]=useState（0）； const steps=getSteps（）； 常量值={ handleChange， 下一步， 哈萨普， 凯伊德， 父ID， 应用程序， 挑选出来的， 参考查询， 当选， }; console.log（'insideee value'，value）； 常量handleNext=（）=>{ setActiveStep（（prevActiveStep）=>prevActiveStep+1）； }; 常量把手=（）=>{ setActiveStep（（prevActiveStep）=>prevActiveStep-1）； }; 常量handleReset=（）=>{ setActiveStep（0）； }; 调试器； 返回( {steps.map（（标签）=>( {label} ))} {activeStep===steps.length( 所有步骤都已完成 重置 ) : ( {getStepContent（activeStep、handleChange、values）} {activeStep===steps.length-1？'Finish'：'Next'} )} ); }

---

你的问题是什么？请阅读描述@学生我已经阅读了描述，不清楚你在问什么。你面临的问题是什么？你试图解决什么？你能提供一个简单的例子来重现这个问题吗？