设置自动完成下拉列表的 Z-index，并使用 getOptionSelected答案

【问题标题】：Setting Z-index of autocomplete dropdown, and using getOptionSelected设置自动完成下拉列表的 Z-index，并使用 getOptionSelected
【发布时间】：2020-04-22 22:40:02
【问题描述】：

我正在我的 webApp 中实现自动完成材料 ui 小部件，但下拉菜单在我的编辑面板后面呈现。我可以使用箭头键选择选项，但看不到弹出窗口。如果我删除以下任一 css 属性 {position: "fixed"} 或 {"z-index": "2000"} 它可以工作，但我的编辑面板将不再正确。所以似乎我需要能够将下拉列表的 zindex 设置为 2001 或其他东西，但我不确定这如何或是否是最佳解决方案。

我也尝试将下拉框的初始值设置为“ACCU-SEAL 35-532 Bag Sealer”，但出现以下错误：

Material-UI: the 'getOptionLabel' method of Autocomplete returned undefined instead of a string for "ACCU-SEAL 35-532 Bag Sealer".

所以我尝试将以下内容添加到我的自动完成功能中：

getOptionSelected={(option, value) => option.label === value}

但我得到了同样的错误。

我在这里有一个我的代码示例： https://codesandbox.io/s/material-demo-fv075?file=/formElementsEdit.jsx

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以使用disablePortal 属性确保菜单将在当前节点下呈现：

<Autocomplete
    ....
    disablePortal
    ....
/>

【讨论】：

非常感谢您的帮助，我已经尝试了一周的时间来解决这个问题。您对如何在“自动完成”框中获取初始值有什么建议吗？
您可以将defaultValue 属性用于非受控元素，或将value 用于受控元素。
当我使用 value 时，我收到以下错误：Material-UI: the value provided to Autocomplete is invalid. None of the options match with "ACCU-SEAL 35-532 Bag Sealer". You can use the getOptionSelected prop to customize the equality test. 这就是我尝试使用 getOptionSelected 的原因，但由于某种原因它仍然无法正常工作。有什么帮助吗？
codesandbox.io/s/material-demo-fv075?file=/formElementsEdit.jsx 如果你在控制台中查看有 3 个错误，并且自动完成框没有默认值。
这里回答的问题：stackoverflow.com/questions/61418401/…