如何解决单击屏幕上的其他地方时如何防止按钮失去焦点?
我对 React 还很陌生,我正在使用样式组件。
const Button = styled.button`
height: 35px;
width: 85px;
color: #0288d1;
border: 1px solid #0288d1;
background: white;
border-radius: 1px;
&:hover {
cursor: pointer;
background: #cfe8ef;
}
&:focus {
background: #0288d1;
color: white;
}
`;
当用户点击屏幕上的其他地方时,我想防止按钮失去焦点。我是否需要添加额外的 JavaScript 代码来执行此操作,或者是否有可以帮助我解决此问题的 CSS 属性?
解决方法
试试下面的:
const setFocus = e => {
e.target && e.target.focus();
};
return (
<button
onBlur={e => {
setFocus(e);
}}
>
My Button
</button>
);
,
您可以在全局样式表中添加 :active
。
button:active {
border: 2px solid #000;
}
所以任何时候,button
标签都会在活动模式下接收这种样式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。