我正在使用带有多选的 Material UI Autocomplete组件。它在桌面上运行良好，但在移动设备上，我想禁用键盘输入并只允许触摸选择。换句话说，我不希望出现智能手机键盘。
我在文档中没有找到任何参数：https : //material-ui.com/api/autocomplete/#props
我试图禁用 TextField，但我仍然可以输入文本 - 似乎禁用的参数没有添加到页面源的输入字段中：
<Autocomplete
disableClearable
options={[...]}
renderInput={(params) => <TextField {...params} label="xxx" disabled />}
blurOnSelect="touch"
/>
我需要没有自动完成功能的自动完成组件:) - 我也可以切换到默认的 Select 组件，但我想在桌面上保留自动完成功能。此外，自动完成组件提供带有复选框的多选。
如果您希望禁用本机键盘，我认为您应该为移动设备创建不同的组件。Material-ui Autocomplete 是在 Material-ui TextField 组件之上构建的，在其上构建了 Select 组件。
这对代码片段执行相同的操作（https://material-ui.com/components/selects/#api ）
<InputLabel id="label">Age</InputLabel>
<Select labelId="label" id="select" value="20">
<MenuItem value="10">Ten</MenuItem>
<MenuItem value="20">Twenty</MenuItem>
</Select>
<TextField id="select" label="Age" value="20" select>
<MenuItem value="10">Ten</MenuItem>
<MenuItem value="20">Twenty</MenuItem>
</TextField>
因此，如果您将禁用props传递给自动完成组件中的 TextField，您的整个文件将被禁用。
要解决此问题，您可以创建一个组件，该组件用于桌面是自动完成的，而对于移动设备则是仅选择字段。
编辑：常规选择组件确实提供了一种显示复选框的方法：https : //material-ui.com/components/selects/#multiple-select
您不希望出现键盘的原因可能是它使自动完成结果像在我的应用程序中一样移动到文本字段本身上：
如果没有屏幕键盘，它看起来不错：
要解决这个“在输入字段上移动”的问题，您可以将列表框的位置设为绝对位置，例如：
<Autocomplete
disableClearable
options={[...]}
renderInput={(params) => <TextField {...params} label="xxx" disabled />}
blurOnSelect="touch"
ListboxProps={{ style: { position: 'absolute', backgroundColor: '#fafafa'} }}
/>
由于某种原因，这确实使列表框失去了它的背景颜色和列表框边框，所以我也在那里再次声明了背景颜色，但对于其余部分，它将保留用户键盘下的建议：
希望这可以帮助。@mods 如果屏幕截图太大，请随意将它们更改为 url，但我认为这有助于描述问题/解决方案。