如何点击Material UI Stepper图标切换至对应步骤？

要实现点击Stepper的步骤图标直接跳转到对应步骤，只需通过状态管理+步骤点击事件绑定即可完成，具体方案如下：

核心实现步骤 #

1. 用useState维护当前激活的步骤索引：

const [activeStep, setActiveStep] = useState(0);

2. 给每个<Step>组件绑定点击事件，点击时更新activeStep为当前步骤的索引：

<Step key={label} onClick={() => setActiveStep(index)}>
  <StepLabel>{label}</StepLabel>
</Step>

3. 可选优化：添加手型光标样式，提示用户该区域可点击

const useStyles = makeStyles({
  stepLabel: {
    cursor: 'pointer'
  }
});

// 在StepLabel上应用样式
<StepLabel className={classes.stepLabel}>{label}</StepLabel>

完整示例代码 #

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  backButton: {
    marginRight: theme.spacing(1),
  },
  instructions: {
    marginTop: theme.spacing(1),
    marginBottom: theme.spacing(1),
  },
  stepLabel: {
    cursor: 'pointer',
  },
}));

function getSteps() {
  return ['Step 1', 'Step 2', 'Step 3', 'Step 4'];
}

function getStepContent(step: number) {
  switch (step) {
    case 0:
      return 'Step 1: Select campaign settings';
    case 1:
      return 'Step 2: Create an ad group';
    case 2:
      return 'Step 3: Create an ad';
    case 3:
      return 'Step 4: Review and publish';
    default:
      return 'Unknown step';
  }
}

export default function HorizontalLinearStepper() {
  const classes = useStyles();
  const [activeStep, setActiveStep] = useState(0);
  const steps = getSteps();

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleReset = () => {
    setActiveStep(0);
  };

  return (
    <div className={classes.root}>
      <Stepper activeStep={activeStep} alternativeLabel>
        {steps.map((label, index) => (
          <Step key={label} onClick={() => setActiveStep(index)}>
            <StepLabel className={classes.stepLabel}>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
      <div>
        {activeStep === steps.length ? (
          <div>
            <Typography className={classes.instructions}>
              All steps completed - you're finished
            </Typography>
            <Button onClick={handleReset}>Reset</Button>
          </div>
        ) : (
          <div>
            <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>
            <div>
              <Button
                disabled={activeStep === 0}
                onClick={handleBack}
                className={classes.backButton}
              >
                Back
              </Button>
              <Button variant="contained" color="primary" onClick={handleNext}>
                {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

关键说明 #

• 点击任意步骤的图标（或标签区域）都会触发跳转，无论当前处于哪一步，已完成/未完成步骤都支持跳转。
• 手型光标样式是可选的，但能显著提升用户体验，明确告知用户该区域可交互。

内容的提问来源于stack exchange，提问作者Abdullah Abbasi