在同一框中输入文本时，有没有办法使浮动标签保持突出显示

问题描述

我目前正在使用材料界面组件来处理电话号码字段。

字段结构如下

<Box>
   <Autocomplete />
   <TextField />
</Box>

自动完成字段（用于国家/地区代码）具有一个浮动标签，其内容为“手机号码”。

选择国家/地区代码后，将突出显示该国家/地区代码，但是，当要在 TextField 中输入手机号码时，将不再突出显示该电话号码。

只要选择了框内的任何组件，是否有办法使浮动标签保持突出显示？

解决方法

“自动完成”中的TextField接受输入道具，其中之一就是InputLabelProps。这样可以控制标签的突出显示和缩小。

InputLabelProps具有2个属性，可控制标签的焦点和收缩

InputLabelProps: {
 focused: true/false,shrink: true/false,}

这两个属性的值均为boolean值，并决定标签是聚焦还是收缩。

可以使用钩子控制这些属性的值。

const [focus,setFocus] = useState(false);

This是自动完成功能的一个示例。您可以根据某些事件设置焦点的值。