無法與 MUI 步進器交互並更改值

Question

我想使用 MUI 步進器來替換 Select 組件。 select 組件用於指示用戶正在處理的文檔的狀態（新建、進行中、完成等）。 我已設法在步進器中顯示正確的狀態，但我無法與之交互以向前或向后移動狀態。

這是我的步進文件。 我通過道具傳遞狀態值：

export default function IntakeStatusBar(props) {
    const { status } = props;
    const classes = useStyles();
    const [activeStep, setActiveStep] = useState(0);
    const steps = ["New", "In Progress", "Completed"];

    useEffect(() => {
        if (status === "In Progress") {
            setActiveStep(1);
        } else if (status === "Completed") {
            setActiveStep(2);
        } else setActiveStep(0);
    }, [status, activeStep]);

    const handleStep = (step) => () => {
        setActiveStep(step);
    };

    return (
        <div className={classes.root}>
            <Stepper activeStep={activeStep} alternativeLabel>
                {steps.map((label, index) => (
                    <Step key={label}>
                        <StepButton onClick={handleStep(index)}>{label}</StepButton>
                    </Step>
                ))}
            </Stepper>
        </div>
    );
}

這是我調用和顯示步進器的地方：

export default function IntakeDetails() {
    const [details, setDetails] = useState("");

    const onTextChange = (e) => {
        var id = e.target.id ? e?.target.id : e?.target.name;
        var value = e.target.value;
        setDetails({ ...details, [id]: value });
    }
....
    return (
        <IntakeStatusBar status={details?.Status} onChange={onTextChange} />
        // This is the Select drop down menu I have been using
        <TextField
            label="Status"
            error={requiredField && details?.Status?.length <= 0}
            value={details?.Status}
            disabled={!(adminRole && isSolutionsTab && details?.Status !== "In Plan")}
            select
            onChange={onTextChange}
        >
            {details.StatusList?.map((choice) => {
                return (
                    <MenuItem key={choice} value={choice}>
                        {choice}
                    </MenuItem>
                );
            })}
        </TextField>
    )
}

這是 JSON 中狀態字段的樣子：

{
    Status: "New"
}

Answer 1

除了改變這個：

<StepButton onClick={() => handleStep(index)}>{label}</StepButton>

你必須改變這個：

const handleStep = (step) => {
    setActiveStep(step);
};

如果您希望用戶單擊步驟，請將 Stepper 設置為非線性：

<Stepper nonLinear activeStep={activeStep} alternativeLabel>

我還注釋掉了useEffect ，因為我不知道它的目的是什么，並且它與 activeStep state 相混淆。