How to change the numbers in steps of material-ui Stepper?

Refresh

November 2018

Views

247 time

2

enter image description here

These steps takes the numbers which are length of the steps array i.e

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

Later this state may change to

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

Or

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

and so on....

But in all the cases my steps show only 1,2,3,4,. I need to change those numbers according to the steps' array element.

This is the code for stepper.

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

How to achieve that?

If I use StepLabel component it looks like enter image description here

But I don't want label. I want those labels should be on step buttons. Code for this:

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

1 answers

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