Question

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

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

因此，基本上，如果用户尚未键入太多内容，则初始选项将只是街道名称（其本身不是有效输入，而只是中间结果），应提示其他选项。

因此，我的问题是，如何完全摆脱getOptionSelected并强制其不对此进行评估？因为一旦他们选择了一个选项，就会提示他们新的选项（在选择街道名称的情况下-并且所选的选项因此永远不会与导致错误的新选项匹配），或者他们将直接提交地址（例如，通过点击地址会将其重定向到结果）。

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

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

我希望我的问题很清楚。

Answer 1

尝试一下：

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

在“材料UI自动完成”示例中查找更多信息：