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

Question

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

    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>
      );
    })}

如果这不是场景，请编辑并详细说明您的示例，例如step array单击acitveindex您希望的步长值。请显示功能代码handleStep

Answer 2

由于有未标记的步骤并且不希望总数改变，我自己正在处理这个问题。您需要做的是提供icon={step}给您的 StepLabel。

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

这对我来说非常有效，希望你也可以使用它。