如何在 Material-ui 中的 onFocus 上隐藏 Autocomplete 的标签？

Posted 2023-02-22

【中文标题】如何在 Material-ui 中的 onFocus 上隐藏 Autocomplete 的标签？

【英文标题】：How to hide a label for Autocomplete on onFocus in Material-ui?

【发布时间】：2020-06-08 21:14:43

【问题描述】：

我是 Material-ui 的新手。我正在尝试从@material-ui/labs 自定义Autocomplete 组件。我想隐藏字段标签。有人可以帮我定制相同的吗？ 我尝试将hiddenLabel="true" 标志添加到自动完成元素，但它不起作用。下面是一个沙盒链接。 https://codesandbox.io/s/material-demo-jwmp2

【问题讨论】：

检查document 找到可以用作Autocomplete 的道具

你可以试试：InputLabelProps=shrink: false

您应该使用占位符而不是标签。即placeholder="Combo box"

【参考方案1】：

如果您只想删除文本字段的标签，则只需删除<TextField ...params variant="outlined" />中的标签部分

这是相同的代码和框 - https://codesandbox.io/s/material-demo-rzxsi

【参考方案2】：

如果您想隐藏 onSelect 上的标签，则可以在 TextField 中使用占位符代替标签或删除空白值的标签。

这是相同的代码沙箱链接 https://codesandbox.io/s/material-demo-6kphs