过滤自动完成材料 UI 实验室中的选择选项不适用于 onChange答案

【问题标题】：filterSelectedOptions in autocomplete Material UI Lab is not working with onChnage过滤自动完成材料 UI 实验室中的选择选项不适用于 onChange
【发布时间】：2020-08-06 05:39:42
【问题描述】：

当我使用自动完成来获取所选日期时，所选选项不会被过滤。因此，我能够选择相同数据的多个实例。虽然当我删除 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"
    />
  )}
/>

【问题讨论】：

你应该在codesandbox上重现你的问题
CodeSandbox Link 这是代码沙箱的链接

标签： javascript reactjs material-ui material-design

【解决方案1】：

根据Autocompletedoc：

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

getOptionSelected - func - 用于根据当前值确定是否选择了选项。默认使用严格相等。

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

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

下面是分叉的代码框

【讨论】：

【解决方案2】：

您的onChange 功能需要增强。您必须将值数组设置为与选项数组中给出的相同。两个数组都需要匹配。您从options--> Titles 获取详细信息。那么您必须通过在onChange 上创建一个类似的数组来设置它。点赞options--> Titles

试试我的工作沙盒示例here

【讨论】：

【解决方案3】：

为了让您更多地了解正在发生的事情：为什么放置 onChange 处理程序导致 options 一直被再次填充的主要原因是因为您的组件每次都重新渲染将状态设置为几天，而不是您没有设置状态几天。我发现 Material UI 自动完成默认检查适用于存储在状态中的数组，而不是硬编码的 options

options={availableDays} //state based

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

【讨论】：

感谢您的回答工作正常，但再次设置新状态是一项开销。其他答案做得很好