Блог

Я использую пользовательский интерфейс материала круче, чем моя задача на первом шаге, у меня есть флажок 2, и на шаге 2 также у меня есть два флажка, поэтому мне нужно установить условие в зависимости от выбора, означает, что если я выберу отдельного человека на первом шаге и перейду к, если я выберу Первый скрининг, то на шаге 3 мой один компонент покажет, например, текстовое поле показать, если я выберу массовый на шаге 1 и первый экран на шаге 2, то мой другой компонент покажет, например, поле загрузки файла, которое мне нужно установить, зависит от выбора или истинного условия в следующем значении на шаге 3 данные будут отображаться в любом шаге, означает, что на шаге 1 невозможно одновременно установить оба флажка, только один флажок будет установлен за один шаг вы также можете увидеть ссылку CodeSandbox

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

// Keep track of Selections in Step 1 and 2.
// We can use array as well with index as step keys.
const stepSelection = {
  individual: {
    value: false,
    text: "Individual"
  },
  bulk: {
    value: false,
    text: "Bulk"
  },
  firstScreening: {
    value: false,
    text: "First Screening"
  },
  secondScreening: {
    value: false,
    text: "Second Screening"
  }
};

// Handle on change even for checkbox.
const setStepsSelection = (e) => {
  stepSelection[e.target.name].value = e.target.checked;
};

function getStepContent(stepIndex) {
  switch (stepIndex) {
    case 0:
      return (
        <Box>
          <Box display="flex" alignItems="center">
            <Checkbox
              color="primary"
              inputProps={{ "aria-label": "secondary checkbox" }}
              onChange={setStepsSelection}
              name="individual"
            />
            <Typography variant="subtitle2" noWrap={true}>
              Individual
            </Typography>
          </Box>
          <Box display="flex" alignItems="center">
            <Checkbox
              color="primary"
              inputProps={{ "aria-label": "secondary checkbox" }}
              onChange={setStepsSelection}
              name="bulk"
            />
            <Typography variant="subtitle2" noWrap={true}>
              Bulk
            </Typography>
          </Box>
        </Box>
      );
    case 1:
      return (
        <Box>
          <Box display="flex" alignItems="center">
            <Checkbox
              color="primary"
              inputProps={{ "aria-label": "secondary checkbox" }}
              onChange={setStepsSelection}
              name="firstScreening"
            />
            <Typography variant="subtitle2" noWrap={true}>
              first Screening
            </Typography>
          </Box>
          <Box display="flex" alignItems="center">
            <Checkbox
              color="primary"
              inputProps={{ "aria-label": "secondary checkbox" }}
              onChange={setStepsSelection}
              name="secondScreening"
            />
            <Typography variant="subtitle2" noWrap={true}>
              second Screening
            </Typography>
          </Box>
        </Box>
      );
    case 2:
   // if "individual" - "firstScreening" and "secondScreening"depend on selection is true then show this

      return (
        <form noValidate autoComplete="off">
          <TextField id="standard-basic" label="Standard" />
          <TextField id="standard-basic" label="Standard" />
          
        </form>
      );

      // if "bulk" - "firstScreening" and "secondScreening" depend on selection is true then show this
      
      // return (
      //     <Paper elevation={3}>
      //     <Typography variant="subtitle2" noWrap={true}>
      //         Bulk Upload
      //       </Typography>
      //     </Paper>
      // );
    
        // this is i am trying previously
      // Map for previous checkboxes.
    // const selections = [
    //   "individual",
    //   "bulk",
    //   "firstScreening",
    //   "secondScreening"
    // ];

    // // Find the selected checkboxes in step 1 and 2.
    // let prevSelections = [];
    // selections.forEach((key) => {
    //   stepSelection[key].value amp;amp;
    //     prevSelections.push(stepSelection[key].text);
    // });

    // return prevSelections;
    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 (
       step 4
      );
    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;

 

Ссылка на CodeSandbox