Как сделать выбор, какие его варианты, зависит от другого выбора - PullRequest
Новая
       8

Как сделать выбор, какие его варианты, зависит от другого выбора

0 голосов
/ 23 марта 2020

Основываясь на коде пошагового кода Material-UI, я бы хотел реализовать выбор, у которого есть опции, зависящие от выбранного значения в другом выборе (в том же компоненте реакции). Я сделал функцию переключения: 

function getGradeContent(grade: number) {
  switch (grade) {
    case 0:
      return <MenuItem value={0}>Infantil</MenuItem>;
    case 1:
      return (
        <div>
          <MenuItem value={1}>1º Ano</MenuItem>
          <MenuItem value={2}>2º Ano</MenuItem>
          <MenuItem value={3}>3º Ano</MenuItem>
          <MenuItem value={4}>4º Ano</MenuItem>
          <MenuItem value={5}>5º Ano</MenuItem>
        </div>
      );
    case 2:
      return (
        <div>
          <MenuItem value={6}>6º Ano</MenuItem>
          <MenuItem value={7}>7º Ano</MenuItem>
          <MenuItem value={8}>8º Ano</MenuItem>
          <MenuItem value={9}>9º Ano</MenuItem>
        </div>
      );
    case 3:
      return (
        <div>
          <MenuItem value={10}>1º Ano Médio</MenuItem>
          <MenuItem value={11}>2º Ano Médio</MenuItem>
          <MenuItem value={12}>3º Ano Médio</MenuItem>
        </div>
      );
    case 4:
      return <MenuItem value={13}>Técnico</MenuItem>;
    case 5:
      return <MenuItem value={14}>Graduação</MenuItem>;
    case 6:
      return <MenuItem value={14}>Pós-Graduação</MenuItem>;
    default:
      return "Unknown step";
  }
}

Затем я создал выбор материала UI внутри Formik: 

export default function ScholarshipForm() {
    const classes = useStyles();
    return (
      <Formik
        initialValues={{
            actual_school : false,
            school_name : "",
            date_begin : new Date(),
            date_end : "",
            level : 0,
            grade : 0,
        }}
        onSubmit={(values, { setSubmitting }) => {        
            setTimeout(() => {
                JSON.stringify(values, null, 2);
                console.log(values)
                setSubmitting(false);
            }, 400);
            }}
        validationSchema={validationSchema} 
    >
      {({ values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit,
          isSubmitting, }) => (          
          <Form className={classes.root} onSubmit={handleSubmit}> 
            <FormControl id="level" variant="outlined" className= 
               {classes.formControl}>
            <InputLabel id="level">Nivel Escolar</InputLabel>
            <Select
               labelId="level"
               id="level"
               name="level"
               label="Nível Escolar"
               onBlur={handleBlur}
               value={values.level}
               onChange={handleChange}
               aria-describedby="Nivel Escolar"
             >
               <MenuItem value={0}>Infantil</MenuItem>
               <MenuItem value={1}>Fundamental 1</MenuItem>
               <MenuItem value={2}>Fundamental 2</MenuItem>
               <MenuItem value={3}>Médio</MenuItem>
               <MenuItem value={4}>Técnico</MenuItem>
               <MenuItem value={5}>Graduação</MenuItem>
               <MenuItem value={6}>Pós-Graduação</MenuItem>
             </Select>
             <FormHelperText>{(errors.level && touched.level) && errors.level}</FormHelperText>
             </FormControl>

Этот выбор должен передать values.level другому выбору, чтобы быть Применительно к этой функции и отобразить опции пункта меню в этом выборе, вот моя неудачная попытка. 

<FormControl id="grade" variant="outlined" className={classes.formControl}>
  <InputLabel id="grade">Ano Escolar</InputLabel>
  <Select
    labelId="grade"
    id="grade"
    name="grade"
    label="Ano Escolar"
    onBlur={handleBlur}
    value={values.grade}
    onChange={handleChange}
    aria-describedby="Ano Escolar"
  >
    {const index = {values.level}; //"Parsing error: Expression expected"
                getGradeContent.map((grade:number, index:number) => {
                    return(
                        {grade}
                    );
                })}
            </Select>
  <FormHelperText>{(errors.level && touched.level) && errors.level}</FormHelperText>
</FormControl>

Есть ли практический способ решить эту проблему?

1 Ответ

1 голос
/ 24 марта 2020

Я думаю, что вы не можете вернуть MenuItems, обернутые в тег div, для второго выбора, поскольку это не структура, определенная в Material React.

  • Вы можете создать карту элементов, в которой ключами являются первые. Выберите значения MenuItem.
  • Второй выбор данных MenuItems может быть значениями карты.
  • Затем вы можете получить данные для создания второго выбора на карте, который является массивом.
  • Этот массив может быть зациклен для создания MenuItems

https://codesandbox.io/s/material-demo-qqsx5

...