如果在 MUI Select 中选择了一个选项，如何禁用其他选项？

Question

是否可以根据其他 select 的值更改 Select 的 select 选项？

so for example:
if I have lets say A and B
if you select A
then you can select in the other textfield C and D
but if you selected B 
then you can select E and F

视觉示例：

所以我有这两个选项

当我 select David 我只想出现到 6 点而不是 7、8、9、10 等

然后如果你 select 另一个然后显示所有内容

选项：

const grados = 
      [{value: "Prekínder-3", label: "Prekínder-3"},
       {value: "Prekínder", label: "Prekínder"},
       {value: "Kínder", label: "Kínder"},
       {value: "1° Grado", label: "1° Grado"},
       {value: "2° Grado", label: "2° Grado"},
       {value: "3° Grado", label: "3° Grado"},
       {value: "4° Grado", label: "4° Grado"},
       {value: "5° Grado", label: "5° Grado"},
       {value: "6° Grado", label: "6° Grado"},
       {value: "7° Grado", label: "7° Grado"},
       {value: "8° Grado", label: "8° Grado"},
       {value: "9° Grado", label: "9° Grado"},
       {value: "10° Grado", label: "10° Grado"},
       {value: "11° Grado", label: "11° Grado"},
       {value: "12° Grado", label: "12° Grado"}]

       const sedes = 
       [{value: "Academia Internacional Boquete", label: "Academia Internacional Boquete"},
        {value: "Academia Internacional David", label: "Academia Internacional David"}]

我正在使用的 2 个文本字段：

              <TextField 
               select
               margin="normal"
               value={colegio}
               helperText="Seleccione la sede"
               onChange={handleChangeColegio}
               >
                   {sedes.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
          </TextField>

          <TextField 
               select
               margin="normal"
               value={grado}
               helperText="Seleccione el grado"
               onChange={handleChangeGrado}
               >
                   {grados.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
          </TextField>

Answer 1

您需要将第二个 Select 的选项列表存储在一个状态中。然后当你 select 第一个选项时，根据 selected 值更新状态：

const [options2, setOptions2] = useState(allOptions2);

const handleChangeOption1 = (event) => {
  const selectedValue = event.target.value;

  if (selectedValue === options1[0].value) {
    setOptions2(allOptions2.slice(0, 9)); // get the first 9 items
  } else {
    setOptions2(allOptions2.slice(-6)); // get the last 6 items
  }
  setOption1(selectedValue);
};

<TextField
  select
  onChange={handleChangeOption1}
>
  {options1.map((option) => (...))}
</TextField>

<TextField select>
  {options2.map((option) => (...))}
</TextField>

如果在 MUI Select 中选择了一个选项，如何禁用其他选项？

How to disable other options after if an option is selected in MUI Select?

uitextfield

reactjs

material-ui

现场演示