如何通过 react/next js 删除 :focus 伪类？

Posted 2023-03-06

【中文标题】如何通过 react/next js 删除 :focus 伪类？

【英文标题】：How to remove :focus pseudo class via react/ next js?

【发布时间】：2021-10-22 20:49:11

【问题描述】：

我正在为我的 Web 应用程序使用下一个 js，我正在使用 :focus 显示按钮工具提示，即使选择了选项，它仍然保持不变。我想不择手段地删除这个:focus 类。

这是我的 css 供参考：

.icon-container-interaction:focus .post-cell-options
    opacity: 1;
    top: 56px;
    right: 16px;
    z-index: 1;
    box-shadow: 0px 0px 12px 6px  rgba(0, 0, 0, 0.08);
    visibility: visible;



.post-cell-options
    opacity: 0;
    visibility: hidden;
    border-radius: 10px;
    z-index: 1;
    background-color: #ffffffe3;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: 0.2s;
    float: right;
    color: #000;
    top: 0px;
    right: 0px;
    position: absolute;
    width: 200px;

【参考方案1】：

很难看不到组件的代码本身，但听起来您可以尝试为按钮创建一个引用，然后在单击选项时调用blur()（这会使该元素失去焦点，有效地删除了那个伪类。

不了解完整设置的基本思路：

const buttonRef = React.useRef(null)

....

return <>
  <ButtonTooltip ref=buttonRef />
  <Options onClick=() => buttonRef.current.blur() />
</>

类组件：

constructor(props)  
  super(props); 
  this.buttonRef = React.createRef()


return <>
  <ButtonTooltip ref=this.buttonRef />
  <Options onClick=() => this.buttonRef.current.blur() />
</>

【讨论】：

有没有办法在类组件中使用它？

是的，类组件等效于React.createRef，您将其绑定到构造函数...用该代码编辑了原始帖子