使用 Material UI 自动完成组件根据当前选择的选项禁用选项

Question

我正在使用 Material UI、React Hook Form 和 Yup 创建一个自动完成元素，它允许用户为一周中的几天选择多个输入。

如果用户选择“每天”选项，我想禁止选择周日、周一、周二...等。我将如何使用 getOptionDisabled 来做到这一点？

这是我当前的代码...

const daysOfWeekSuggestions = [
    {label: "Every day"},
    {label: "Sunday"},
    {label: "Monday"},
    {label: "Tuesday"},
    {label: "Wednesday"},
    {label: "Thursday"},
    {label: "Friday"},
    {label: "Saturday"}
];

<Autocomplete
    disableClearable
    disablePortal
    filterSelectedOptions
    multiple
    getOptionLabel={(option) => option.label}
    id="days-autocomplete"
    options={daysOfWeekSuggestions}
    renderInput={(params) => <TextField
        required
        error={errors.daysOfWeek ? true : false}
        id="daysOfWeek"
        label="Days of the week"
        name="daysOfWeek"
        type="search"
        {...params}
        {...register("daysOfWeek")}
    />}
/>

Answer 1

您需要做的是使用getOptionDisabled 属性，然后检查用户是否已经选择了每天。我猜你正在将它保存到类似于我在这里使用它的状态，所以你可以使用 .some 函数来查看 Every day 对象是否在 values 数组中。

const daysOfWeekSuggestions = [
  { label: "Every day" },
  { label: "Sunday" },
  { label: "Monday" },
  { label: "Tuesday" },
  { label: "Wednesday" },
  { label: "Thursday" },
  { label: "Friday" },
  { label: "Saturday" }
];

export default function DaysOfTheWeekSelect() {
  const [value, setValue] = React.useState([]);

  const handleOnChange = (e, value) => {
    setValue(value);
  };

  return (
    <Autocomplete
      disableClearable
      disablePortal
      multiple
      getOptionLabel={(option) => option.label}
      id="days-autocomplete"
      onChange={handleOnChange}
      options={daysOfWeekSuggestions}
      getOptionDisabled={(option) => {
        if (value.some((day) => day.label === "Every day")) {
          return true;
        }
        if (value.some((day) => day.label === option.label)) {
          return true;
        }
      }}
      value={value}
      renderInput={(params) => (
        <TextField
          required
          error={errors.daysOfWeek ? true : false}
          id="daysOfWeek"
          label="Days of the week"
          name="daysOfWeek"
          type="search"
          {...params}
          {...register("daysOfWeek")}
        />
      )}
    />
  );
}

我还指出，如果您已经选择了一个值，那么它也会被禁用。似乎比仅仅过滤掉选定的值好一点

Answer 2

我认为您需要的不仅仅是 getOptionDisabled 选项。 我在我的上一个应用程序中做了类似的事情，因为您需要为每个选项添加一个名为 disabled 的属性，并将 onChange 添加到每天，手动禁用其余选项。

您可以在此处查看工作演示 - https://codesandbox.io/s/disable-mui-autocomplete-options-on-condition-gurzb