[英]Cannot interact with MUI stepper and change a value
I want to use an MUI stepper to replace a Select component.我想使用 MUI 步进器来替换 Select 组件。 The select component is used to indicate the status of the document the user is working in (New, In Progress, Complete, etc.). select 组件用于指示用户正在处理的文档的状态(新建、进行中、完成等)。 I have managed to display the correct status in the stepper, but I cannot interact with it to move the status forward or back.我已设法在步进器中显示正确的状态,但我无法与之交互以向前或向后移动状态。
This is my stepper file.这是我的步进文件。 I am passing the status value through props:我通过道具传递状态值:
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>
);
}
This is where I call and display the stepper:这是我调用和显示步进器的地方:
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>
)
}
This is what the status field looks like in JSON:这是 JSON 中状态字段的样子:
{
Status: "New"
}
besides changing this:除了改变这个:
<StepButton onClick={() => handleStep(index)}>{label}</StepButton>
you have to change this:你必须改变这个:
const handleStep = (step) => {
setActiveStep(step);
};
and set Stepper to nonLinear if you want user to click on steps:如果您希望用户单击步骤,请将 Stepper 设置为非线性:
<Stepper nonLinear activeStep={activeStep} alternativeLabel>
I also commented out useEffect
since I had no idea what its purpose is and it's messing with activeStep state.我还注释掉了useEffect
,因为我不知道它的目的是什么,并且它与 activeStep state 相混淆。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.