如何使用 MUI 自动完成禁用 TextField 输入？

Question

我在整个应用程序中使用 Autocomplete 和 TextField for renderInput 进行表单字段输入，但有一种情况我不想允许任何文本输入和只允许选择其中一个下拉元素。

但是，如果我切换到更自然的 Select 组件，下拉元素的样式会有所不同。特别是，选项的宽度似乎没有从 FormControl 元素继承。

如果我使用自动完成并在浏览器中使用开发工具来设置 input 元素的 disabled 属性，一切都会按照我的意愿进行。但是，如果我将 inputProps={{disabled: true}} 传递给 TextField，当我单击下拉菜单时，事情就会爆炸。

有什么建议吗？

Answer 1

您应该通过 renderInput 的 inputProps 将原生输入元素的 readOnly 属性重写为 true 以获得所需的结果：

    <Autocomplete
      renderInput={({ inputProps, ...rest }) =>    <TextField
      {...rest}
      inputProps={{ ...inputProps, readOnly: true }}
    />

Demo

如何使用 MUI 自动完成禁用 TextField 输入？

How do I disable TextField input with MUI Autocomplete?

material-ui

autocomplete

textfield