Javascript 根据前面的选择选择数据

我使用的材料UI更陡我的任务在第一步我有两个复选框，在第二步我也有两个复选框，因此我需要根据选择的意思设置条件，如果我在第一步选择了个人，然后在第三步选择了脚背，例如，我的单组件显示，textField show如果我在步骤1中选择批量，在步骤2中选择第一个屏幕，然后显示我的其他组件，例如，我需要设置的文件上传字段son取决于下一步的选择或真实条件步骤3中的平均值数据将显示在任何步骤中步骤1中的平均值不能同时选中两个复选框一次只有一个复选框将在单个步骤中选中您还可以看到CodeSandBox链接

import React from "react";
import {
  makeStyles,
  Stepper,
  Step,
  StepLabel,
  Button,
  TextField,
  Typography,
  Grid,
  Box,
  Card,
  Checkbox,
  CardContent
} from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
  instructions: {
    marginTop: theme.spacing(1),
    marginBottom: theme.spacing(1)
  },
  backButton: {
    marginRight: theme.spacing(1)
  }
}));

function getSteps() {
  return [
    "first",
    "second",
    "theird",
    "forth",
    "fivth"
  ];
}

function getStepContent(stepIndex) {
  switch (stepIndex) {
    case 0:
      return (
        <Box>
          <Box display="flex" alignItems="center">
            <Checkbox
              color="primary"
              inputProps={{ "aria-label": "secondary checkbox" }}
            />
            <Typography variant="subtitle2" noWrap={true}>
              Individual
            </Typography>
          </Box>
          <Box display="flex" alignItems="center">
            <Checkbox
              defaultChecked
              color="primary"
              inputProps={{ "aria-label": "secondary checkbox" }}
            />
            <Typography variant="subtitle2" noWrap={true}>
              Bulk
            </Typography>
          </Box>
        </Box>
      );
    case 1:
      return (
        <Box>
          <Box display="flex" alignItems="center">
            <Checkbox
              defaultChecked
              color="primary"
              inputProps={{ "aria-label": "secondary checkbox" }}
            />
            <Typography variant="subtitle2" noWrap={true}>
              first Screening
            </Typography>
          </Box>
          <Box display="flex" alignItems="center">
            <Checkbox
              color="primary"
              inputProps={{ "aria-label": "secondary checkbox" }}
            />
            <Typography variant="subtitle2" noWrap={true}>
              second Screening
            </Typography>
          </Box>
        </Box>
      );
    case 2:
      return [
        "Individual first Screening ",
        "Individual second Screening ",
        "Bulk first Screening ",
        "Bulk second Screening "
      ];
    case 3:
      return (
        <TextField
          id="outlined-select-currency"
          label="Target Date"
          variant="outlined"
          size="small"
          type="date"
          InputLabelProps={{
            shrink: true
          }}
          name="target_Date"
        ></TextField>
      );
    case 4:
      return (
        <Grid>
          <Box
            display="flex"
            justifyContent="center"
            alignItems="center"
            mt={3}
          >
            <Box mr={2}>
              title="Alert" icon="icon"
              <Checkbox
                name="alert"
                // checked={rules.exactNameMatch}
                color="primary"
                inputProps={{ "aria-label": "secondary checkbox" }}
                // onChange={handleCheckBoxChange}
              />
            </Box>
            <Box m={2} ml={2}>
              title="Non Alerts" icon="icon"
              <Checkbox
                name="nonAlert"
                // checked={rules.exactNameMatch}
                color="primary"
                inputProps={{ "aria-label": "secondary checkbox" }}
                // onChange={handleCheckBoxChange}
              />
            </Box>
          </Box>
        </Grid>
      );
    default:
      return "Unknown stepIndex";
  }
}

const Initiate = () => {
  const classes = useStyles();
  const [activeStep, setActiveStep] = React.useState(0);
  const steps = getSteps();

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

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };
  const handleStep = (step) => {
    setActiveStep((prevActiveStep) => {
      return step < prevActiveStep ? step : prevActiveStep;
    });
  };

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

  return (
    <Grid container direction="column" justify="center">
      <Stepper activeStep={activeStep} alternativeLabel>
        {steps.map((label, index) => (
          <Step key={label}>
            <StepLabel onClick={() => handleStep(index)}>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
      <Box mt={3}></Box>
      <Grid item xs={12} sm={12} md={6}>
        {activeStep === steps.length ? (
          <Box>
            <Typography className={classes.instructions}>
              All steps completed
            </Typography>
            <Button onClick={handleReset}>Reset</Button>
          </Box>
        ) : (
          <Box>
            <Card>
              <CardContent>
                <Typography className={classes.instructions}>
                  {getStepContent(activeStep)}
                </Typography>
              </CardContent>
            </Card>
            <Box
              mt={2}
              display="flex"
              alignItems="center"
              justifyContent="flex-end"
            >
              <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>
            </Box>
          </Box>
        )}
      </Grid>
    </Grid>
  );
};
export default Initiate;

从“React”导入React；
进口{
制作风格，
步进机，
步
StepLabel，
按钮
TextField，
排版，
网格，
盒子，
卡片
复选框，
卡片内容
}来自“@材料界面/核心”；
const useStyles=makeStyles（（主题）=>({
说明：{
marginTop：主题。间距（1），
marginBottom：主题。间距（1）
},
后按钮：{
边缘光：主题。间距（1）
}
}));
函数getSteps（）{
返回[
“第一”，
“第二”，
“theird”，
“第四”，
“fivth”
];
}
函数getStepContent（stepIndex）{
开关（步进索引）{
案例0：
返回(
个人
大部分
);
案例1：
返回(
首次筛选
二次筛选
);
案例2：
返回[
“个人首次筛选”，
“个人第二次筛选”，
“批量首次筛选”，
“批量二次筛选”
];
案例3：
返回(
);
案例4：
返回(
title=“Alert”icon=“icon”
title=“非警报”icon=“图标”
);
违约：
返回“未知步骤索引”；
}
}
常量初始化=（）=>{
const classes=useStyles（）；
const[activeStep，setActiveStep]=React.useState（0）；
const steps=getSteps（）；
常量handleNext=（）=>{
setActiveStep（（prevActiveStep）=>prevActiveStep+1）；
};
常量把手=（）=>{
setActiveStep（（prevActiveStep）=>prevActiveStep-1）；
};
常数handleStep=（步长）=>{
setActiveStep（（prevActiveStep）=>{
返回步骤{
setActiveStep（0）；
};
返回(
{steps.map（（标签，索引）=>(
handleStep（index）}>{label}
))}
{activeStep===steps.length(
所有步骤都已完成
重置
) : (
{getStepContent（activeStep）}
返回
{activeStep===steps.length-1？“完成”：“下一步”}
)}
);
};
导出默认启动；

---

您需要跟踪第一步和第二步中的选择。你可以用很多方法来做到这一点

我能想到的一种方法是使用

state

为此，必须在React组件内移动函数

getStepContent

，并添加状态

const [prevSteps, setPrevSteps] = React.useState({
    individual: false,
    bulk: true,
    firstScreening: true,
    secondScreening: false
});

对于

复选框

组件，您必须再添加两个属性

name

和

checked

。此处选中的

属性应与相应的状态变量绑定

<Checkbox
   color="primary"
   checked={prevSteps.individual}
   inputProps={{ "aria-label": "secondary checkbox" }}
   onChange={setStepsSelection}
   name="individual"
/>

一旦有了可用的选择数据，最后一步是在第3步对其进行格式化

const preOptions = [
  "individual",
  "bulk",
  "firstScreening",
  "secondScreening"
];

return preOptions.filter((element) => prevSteps[element]).join(" --> ");

您可以检查完整代码。
您需要跟踪第一步和第二步中的选择。你可以用很多方法来做到这一点

我能想到的一种方法是使用
state

为此，必须在React组件内移动函数
getStepContent
，并添加状态

const [prevSteps, setPrevSteps] = React.useState({
    individual: false,
    bulk: true,
    firstScreening: true,
    secondScreening: false
});

对于
复选框
组件，您必须再添加两个属性
name
和
checked
。此处选中的
属性应与相应的状态变量绑定

<Checkbox
   color="primary"
   checked={prevSteps.individual}
   inputProps={{ "aria-label": "secondary checkbox" }}
   onChange={setStepsSelection}
   name="individual"
/>

一旦有了可用的选择数据，最后一步是在第3步对其进行格式化

const preOptions = [
  "individual",
  "bulk",
  "firstScreening",
  "secondScreening"
];

return preOptions.filter((element) => prevSteps[element]).join(" --> ");

您可以查看完整的代码。
如果我选择批量，那么我没有得到一个问题，为什么它选择默认的第二屏，如果我选择批量和第二屏，那么步骤3为什么它变得像这个批量第一屏，如果我返回并更改字段，那么它没有清除数据它的添加我想如果我返回，数据就不清楚了这就像个人第一屏第二屏这样，无论我在第三步中选择了什么，我都不需要打印这个值，我在第三步有两个部分，第一个是文本字段，第二个是上传文件部分，我需要这样设置，如果个人第一屏被选中，那么文本字段显示如果批量第一次筛选然后文件上载显示第二次筛选同样需要更改。您能否告诉我为什么默认情况下第一次筛选和第二次筛选复选框的选择取决于以前的选择？我提供了另一种方法，即使用状态。请检查一个问题，我没有得到如果我选择批量，那么为什么它选择默认的第二个屏幕，如果我选择批量和第二个屏幕，那么步骤3为什么它变得像这个批量第一个屏幕，如果我返回并更改字段，那么它没有清除数据它的addingi thin