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
        }}