自动完成 Material UI Lab 中的 filterSelectedOptions 无法与 onChnage 配合使用

Question

当我使用自动完成来获取所选日期时，所选选项不会被过滤。因此我能够选择相同数据的多个实例。虽然当我删除 OnChange 道具时它会给出结果，但现在我无法更新状态。

<Autocomplete
  multiple
  name="ClassSchedule"
  onChange={(event, value) => setDays(value)}
  ChipProps={{
    style: {
      backgroundColor: "#2EC5B6",
      borderRadius: "5px",
      color: "#fff",
      fontFamily: "Source Sans Pro",
    },
  }}
  id="tags-standard"
  options={[
    { title: "sunday" },
    { title: "monday" },
    { title: "tuesday" },
    { title: "wednesday" },
    { title: "thursday" },
    { title: "friday" },
    { title: "saturday" },
  ]}
  getOptionLabel={(option) => option.title}
  renderInput={(params) => (
    <CssTextField
      {...params}
      style={{
        borderRadius: "10px",
        backgroundColor: "#F5FCFB",
        fontFamily: "Source Sans Pro",
      }}
      variant="outlined"
      id="custom-css-outlined-input"
    />
  )}
/>

Answer 1

根据Autocomplete 文档：

value- any- 自动完成的值。该值必须与选项具有引用相等性才能被选择。您可以使用prop自定义相等行为getOptionSelected。

getOptionSelected- func- 用于确定是否选择某个选项，考虑当前值。默认情况下使用严格相等。

因此，要知道是否从列表中的值中排除所选值，您必须实现getOptionSelected检查排除的相等性，这里是.title

<Autocomplete
  ...
  getOptionSelected={(option, value) => option.title === value.title}
  ...
/>

下面是分叉的codesandbox