这些步骤采用的数字是步骤数组的长度,即
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>
如何做到这一点?
但我不想要标签。我希望这些标签应该在步骤按钮上。代码:
<Stepper alternativeLabel nonLinear activeStep={activePage}>
{steps.map((step, index) => {
return (
<Step key={index}>
<StepLabel
onClick={this.handleStep(step)}
disabled={dealsLoading}
>
{step}
</StepLabel>
</Step>
);
})}
</Stepper>