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

如果不是这种情况，请在您希望的步骤step array的值上单击，以acitveindex之类的示例进行编辑和详细说明。请显示功能代码handleStep

如何在Material-ui Stepper的步骤中更改数字？

1 个答案: