如何更改material-ui Stepper的步数？

Question

这些步骤采用 steps 数组的长度数字，即

    state = {
       steps: [0, 1, 2, 3]
    };

以后这个状态可能会变成

    this.setState({
      steps: [1,2,3,4]
    });

或者

   this.setState({
     steps: [2,3,4,5]
   }); 

等等……

但在所有情况下，我的步骤仅显示 1、2、3、4。我需要根据步骤的数组元素更改这些数字。

这是步进器的代码。

<Stepper alternativeLabel nonLinear activeStep={activePage}>
     {steps.map((step, index) => {
       return (
        <Step key={index}>
          <StepButton
            onClick={this.handleStep(index)}
            disabled={dealsLoading}
          >
            </StepButton>
        </Step>
      );
    })}
  </Stepper>

如何做到这一点？

如果我使用 StepLabel 组件，它看起来像

但我不想要标签。我希望这些标签应该在步骤按钮上。 代码：

 <Stepper alternativeLabel nonLinear activeStep={activePage}>
        {steps.map((step, index) => {
          return (
            <Step key={index}>
               <StepLabel 
                  onClick={this.handleStep(step)}
                  disabled={dealsLoading}
               >
                {step}
              </StepLabel>
            </Step>
          );
        })}
      </Stepper>

Answer 1

根据您的问题，我的理解是您的 steps 号码发生了变化，对吗？如果是的话 问题：基本上你是在改变你的步数但是发送索引。

{steps.map((step, index) => {
       return (
        <Step key={index}>
          <StepButton
            onClick={this.handleStep(step)} // passed step value instead of index.
            disabled={dealsLoading}
          >
            </StepButton>
        </Step>
      );
    })}

如果这不是场景，请通过单击您希望的步骤acitveindex 值来编辑和详细说明您的示例，例如step array。请显示函数代码handleStep