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

Question

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

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

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

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

Answer 1

您可能想在文本字段中添加onKeyPress={(e) => {e.preventDefault();}}如果文本字段中的插入符很烦人，您可以通过在 inputprops 中添加 sx 来更改其颜色以匹配 rest 所以它不会显示InputProps={{sx: {caretColor: "white",}}}

Answer 2

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

Answer 3

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

请将此添加到组件中：

MenuProps={{
            anchorOrigin: {
                vertical: "bottom",
                horizontal: "left"
            },
            transformOrigin: {
                vertical: "top",
                horizontal: "left"
            },
            getContentAnchorEl: null
        }}