自动完成材料UI实验室中的filterSelectedOptions不适用于onChnage

Question

当我使用自动完成功能获取所选日期时，所选选项未得到过滤。因此，我能够选择同一数据的多个实例。虽然当我删除OnChange prop时会给出结果，但是现在我无法更新状态。

<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 doc：

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

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

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

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

下面是分叉的代码和框

Answer 2

您的onChange功能需要增强。您必须将值数组设置为与options数组中给定的值相同。两个数组都需要匹配。您正在从options--> Titles获取详细信息。那么您必须通过在onChange上创建类似的数组来进行设置。像集options--> Titles

尝试“我的工作沙盒”示例here

Answer 3

为您提供更多有关发生的情况的知识：放置onChange处理程序导致options整天都被填充的主要原因是因为您的组件在您每次将状态设置为几天时都会呈现，而不是您每天都没有设置状态。我发现Material UI自动完成默认检查适用于以某种状态存储的数组，而不是您硬编码的options

options={availableDays} //state based

CodeSandBox：https://codesandbox.io/s/so-react-material-ui-autocomplete-h2unq?file=/src/App.js