Material UI Autocomplete - 禁用键盘输入（在移动设备上）答案

【问题标题】：Material UI Autocomplete - disable keyboard input (on mobile)Material UI Autocomplete - 禁用键盘输入（在移动设备上）
【发布时间】：2020-10-29 20:26:36
【问题描述】：

我正在使用带有多选功能的 Material UI Autocomplete 组件。它在桌面上运行良好，但在移动设备上，我想禁用键盘输入，只允许触摸选择。换句话说，我不希望智能手机键盘出现。

我在文档中没有找到任何参数：https://material-ui.com/api/autocomplete/#props

我尝试禁用 TextField，但我仍然可以输入文本 - 似乎禁用的参数没有添加到页面源中的输入字段：

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

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

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

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

因此，如果您将禁用道具传递给自动完成组件中的 TextField，您的整个文件将被禁用。

要解决您可以创建一个组件，该组件对于桌面是自动完成的，而对于移动是仅选择字段。

编辑：常规选择组件确实提供了一种显示复选框的方法：https://material-ui.com/components/selects/#multiple-select

【讨论】：

在这种情况下，我会松开多选复选框，我想保留它....
你们这些男人，在切换到移动设备之前，您会丢失有关检查用途的信息吗？我不确定你的意思，因为你可以在你的 multiselections/select (dosen't mater) 组件中设置相同的 checkobxes，就像在你的自动完成组件中一样。我的一段代码只是为了向您展示您在自动完成中使用的选择是如何构建的。当您禁用 TextField 时，您不能在此字段上使用 Select-它被禁用。
哦，你说得对，可以在常规选择中显示复选框，刚刚在演示中找到！好的，然后我可以切换到常规选择，这将为我解决。谢谢！
没问题，我花了很多时间尝试实现轮子选择器（就像在 iphone 中一样），但它在所有设备上都是一样的（使用 material-ui）。这是一场噩梦：D

【解决方案2】：

您不希望出现键盘的原因可能是它使自动完成结果移动到文本字段本身，就像在我的应用程序中一样：

如果没有屏幕键盘，它看起来会很好：

要解决“在输入字段上移动”的问题，您可以将列表框的位置设为绝对位置，例如：

<Autocomplete
    disableClearable
    options={[...]}
    renderInput={(params) => <TextField {...params} label="xxx" disabled />}
    blurOnSelect="touch"
    ListboxProps={{ style: { position: 'absolute', backgroundColor: '#fafafa'} }}
/>

这确实使列表框失去了它的背景颜色和列表框边框，所以我也在那里再次声明了背景颜色，但其余的它将保留在用户键盘下的建议：

希望这会有所帮助。 @mods 如果屏幕截图太大，可以随意将它们更改为 url，但我认为这有助于描述问题/解决方案。

【讨论】：