React Material UI Autocomplete 避免 getOptionSelected答案

【问题标题】：React Material UI Autocomplete avoid getOptionSelectedReact Material UI Autocomplete 避免 getOptionSelected
【发布时间】：2020-09-06 14:32:26
【问题描述】：

我正在为我的 React 应用程序使用 Material UI 自动完成组件，它工作正常，但是，给我的错误是没有任何选项与所选值匹配。没有造成任何麻烦，但我认为终端警告很烦人 - 所以我想摆脱它。

我收到错误的原因基本上是因为我使用带有中间结果的异步请求来查找街道名称。因此，当用户输入例如Oxf 将开始将牛津街作为选择之一。然后用户可以单击该选项，并获得更多选项，例如它不会提示选择“334-348 Oxford Street”等。

所以基本上，如果用户还没有输入很多内容，初始选项将只是街道名称（其本身不是有效输入，而只是一个中间结果），应该会提示更多选项。

因此，我的问题是，我怎样才能完全摆脱 getOptionSelected 并强制它不评估它？因为一旦他们选择了一个选项，他们要么被提示新选项（在选择街道名称的情况下 - 并且所选选项因此与导致错误的新选项不匹配）或者他们将直接提交地址（即通过单击该地址会将它们重定向到结果）。

现在我已经制定了一个临时解决方案，我只是强制它将新提示的第一个选项设置为 selected 一个在其上放置深灰色背景的选项。所以基本上我想摆脱深灰色的背景。

看起来像这样：getOptionSelected={(option, value) => (options.indexOf(option) === 0 ? true : false)}

我希望我的问题很清楚。

【问题讨论】：

标签： reactjs autocomplete axios material-ui

【解决方案1】：

试试这个：

const useStyles = makeStyles({
  option: {
    '&[aria-selected="true"]': {
      backgroundColor: 'transparent',
    },
  },
});

在此处的 Material UI Autocomplete 示例中查找更多信息：

https://material-ui.com/components/autocomplete/#githubs-picker

【讨论】：