如何解决在同一框中输入文本时,有没有办法使浮动标签保持突出显示
我目前正在使用材料界面组件来处理电话号码字段。
字段结构如下
<Box>
<Autocomplete />
<TextField />
</Box>
自动完成字段(用于国家/地区代码)具有一个浮动标签,其内容为“手机号码”。
选择国家/地区代码后,将突出显示该国家/地区代码,但是,当要在 TextField 中输入手机号码时,将不再突出显示该电话号码。
只要选择了框内的任何组件,是否有办法使浮动标签保持突出显示?
解决方法
“自动完成”中的TextField接受输入道具,其中之一就是InputLabelProps。这样可以控制标签的突出显示和缩小。
InputLabelProps具有2个属性,可控制标签的焦点和收缩
InputLabelProps: {
focused: true/false,shrink: true/false,}
这两个属性的值均为boolean值,并决定标签是聚焦还是收缩。
可以使用钩子控制这些属性的值。
const [focus,setFocus] = useState(false);
This是自动完成功能的一个示例。您可以根据某些事件设置焦点的值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。