如何在Material UI Autocomplete选中Every day时禁用其余星期选项

你需要结合React Hook Form的状态监听能力，配合Autocomplete的getOptionDisabled属性完成需求，步骤如下：

• 第一步：从useForm钩子中获取watch、setValue方法，用于监听表单字段值和更新表单状态

// 你的useForm初始化逻辑
const { register, watch, setValue, formState: { errors } } = useForm({
  // 你的表单配置
});
// 监听 daysOfWeek 字段的当前选中值，默认是空数组
const selectedDays = watch("daysOfWeek", []);
// 判断「Every day」是否已被选中
const isEveryDaySelected = selectedDays.some(item => item.label === "Every day");

• 第二步：给Autocomplete组件添加getOptionDisabled属性，同时补充value、onChange属性实现受控逻辑，避免出现选中「Every day」后仍残留其他日期选项的问题

完整的组件代码如下：

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

<Autocomplete
    disableClearable
    disablePortal
    filterSelectedOptions
    multiple
    value={selectedDays}
    onChange={(_, newValue) => {
      // 若新选中的列表包含「Every day」，仅保留该选项
      const hasEveryDay = newValue.some(day => day.label === "Every day");
      if (hasEveryDay) {
        setValue("daysOfWeek", [{ label: "Every day" }]);
        return;
      }
      setValue("daysOfWeek", newValue);
    }}
    getOptionDisabled={(option) => {
      // 只要选中了「Every day」，就禁用所有单独日期选项
      if (isEveryDaySelected) {
        return option.label !== "Every day";
      }
      return false;
    }}
    getOptionLabel={(option) => option.label}
    id="days-autocomplete"
    options={daysOfWeekSuggestions}
    renderInput={(params) => <TextField
        required
        error={!!errors.daysOfWeek}
        id="daysOfWeek"
        label="Days of the week"
        name="daysOfWeek"
        type="search"
        {...params}
        {...register("daysOfWeek")}
    />}
/>

补充说明：如果你不需要在选中「Every day」时自动清空已选的单独日期，可以去掉onChange里的特殊处理逻辑，仅保留getOptionDisabled的判断即可，后续提交表单时自行处理重复的选中值。

内容的提问来源于stack exchange，提问作者Valerie Hosler