我如何禁用文本字段输入与MUI自动完成?

Question

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

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

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

有什么建议吗?

Answer 1

您应该将本地输入元素的readOnly属性通过renderInput的inputProps重写为true，以达到期望的结果:

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

演示