单击屏幕上的其他位置时如何防止按钮失去焦点？

Posted 2023-03-15

【中文标题】单击屏幕上的其他位置时如何防止按钮失去焦点？

【英文标题】：How to prevent button from losing focus when clicking elsewhere on screen?

【发布时间】：2021-09-18 11:48:25

【问题描述】：

我对 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 属性可以帮助我解决此问题？

【问题讨论】：

这听起来不像是应该使用focus 来完成的事情。焦点旨在显示用户当前正在交互的位置，而点击离开意味着用户现在正在“关注”其他事物。如果您想在单击元素后更改其样式，然后无限期地保持该样式，则应使用复选框并设置:checked 状态的样式，或者仅使用.active 类并在单击时应用它。跨度>

【参考方案1】：

试试下面：

    const setFocus = e => 
        e.target && e.target.focus();
    ;

    return (
        <button
            onBlur=e => 
                setFocus(e);
            
        >
            My Button
        </button>
    );

【参考方案2】：

您可以在全局样式表中添加:active。

button:active 
   border: 2px solid #000;

所以任何时候，button 标签都会在活动模式下接收这种样式。