React Material UI：如何禁用在自动完成文本字段中输入？答案

【问题标题】：React Material UI: How to disable typing in Autocomplete text field?React Material UI：如何禁用在自动完成文本字段中输入？
【发布时间】：2021-07-14 07:32:42
【问题描述】：

我已经使用材质 UI 组件自动完成来呈现一些选项，但我希望自动完成让用户避免输入以获得建议。有什么方法可以让它作为选择下拉菜单并阻止 textField 输入。在这里，我可以使用 Material UI 选择下拉菜单，但无论如何我可以将自动完成更改为选择吗？

我尝试将 disabled 传递给 TextField 道具，但看起来整个下拉列表已禁用，但仍然允许输入文本。

这是我要重用的自动完成组件：

 <Autocomplete
    fullWidth
    value={selected}
    onChange={handleChange}
    renderInput={(params) => <TextField {...params} {...getTextFieldProps({ value: value })} />}
    {...getAutocompleteProps({ value: value })}
  />

【问题讨论】：

在handleChange 函数中只是立即返回，而不将值设置为状态。
我有一些选项可以显示在下拉列表中。在句柄更改中选择了选项值。还有一个光标可以让用户输入。
@Tales 为什么不用Select 组件？
@NearHuscarl 我看过材料 UI 选择演示，我已经看到它在一个粘性对话框中显示了该选项，当打开它时它会悬停在下拉菜单上。如果打开应该显示在下拉菜单下方的选项，我想要类似于自动完成的东西
@Tales 所以你想要this?

标签： javascript reactjs material-ui

【解决方案1】：

为自动完成设置 inputValue=""。

【讨论】：

【解决方案2】：

对于希望将“选择”选项作为下拉菜单打开（向下）的任何人，您需要更新 anchorOrigin 或 transformOrigin 以重新定位您的选项。

如下：

<Select
     ...
     MenuProps={{
            anchorOrigin: {
                vertical: "bottom",
                horizontal: "left"
            },
            transformOrigin: {
                vertical: "top",
                horizontal: "left"
            },
            getContentAnchorEl: null
        }}
    />

【讨论】：

嗨，伙计，你能提供完整的代码吗？
我更新了我的答案@dhiraj1mumbai，如果你使用材料v4，你需要使用"@material-ui/core"中的Select
如果有帮助，请点赞我的回答