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

Question

我目前正在使用 Material UI 组件处理 phone 数字字段。

字段结构如下

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

Autocomplete 字段（用于国家代码）有一个浮动标签，显示为 'Mobile Number'。

选中国家代码时高亮显示，但在TextField中输入手机号码时，不再高亮显示。

有没有一种方法可以让浮动标签在选中框内的任何组件时都保持突出显示？

Answer 1

自动完成中的 TextField 采用输入道具，其中之一是 InputLabelProps。这个控制标签的高亮和收缩。

InputLabelProps有2个属性控制标签的聚焦和收缩

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

这两个属性的值都是布尔值，决定标签是聚焦还是收缩。

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

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

This 是它如何用于自动完成的示例。您可以根据某些事件设置焦点值。