javascript - Material UI Autocomplete - 禁用键盘输入(在移动设备上)

Question

我正在使用 Material UI Autocomplete具有多选功能的组件。它在桌面上运行良好，但在移动设备上，我想禁用键盘输入，只允许触摸选择。换句话说，我不希望智能手机键盘出现。
我在文档中没有找到任何参数:https://material-ui.com/api/autocomplete/#props
我试图禁用 TextField，但我仍然可以输入文本 - 似乎禁用的参数没有添加到页面源中的输入字段中:

<Autocomplete
    disableClearable
    options={[...]}
    renderInput={(params) => <TextField {...params} label="xxx" disabled />}
    blurOnSelect="touch"
/>

我需要没有自动完成功能的自动完成组件:) - 我也可以切换到默认的 Select 组件，但我想在桌面上保留自动完成功能。此外，自动完成组件提供了带有复选框的多选功能。

Answer 1

如果您希望禁用 native 键盘，我认为您应该为移动设备创建不同的组件。
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>

因此，如果您将禁用 Prop 传递给自动完成组件中的 TextField，您的整个文件将被禁用。
要解决此问题，您可以创建一个组件，该组件对于桌面是自动完成的，而对于移动设备是仅选择字段。
编辑:常规选择组件确实提供了一种显示复选框的方法: https://material-ui.com/components/selects/#multiple-select