如何在React/Next.js中移除元素的:focus伪类状态？

可行解决方案 #

方案1：JS主动失焦（适配现有逻辑成本最低）

给选项绑定点击事件，触发后主动让交互容器失去焦点即可清除:focus状态，Next.js中写法示例：

const handleOptionClick = (e) => {
  // 你的原有选项处理逻辑
  e.currentTarget.closest('.icon-container-interaction').blur()
}

方案2：CSS层面修改触发逻辑，无需额外JS

将原有的:focus选择器替换为:focus-visible+:hover组合，focus-visible仅在键盘导航聚焦时生效，鼠标点击后不会长期保留聚焦状态：

/* 替换原有.icon-container-interaction:focus对应的选择器 */
.icon-container-interaction:focus-visible .post-cell-options,
.icon-container-interaction:hover .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;
}

方案3：React状态控制（最符合Next.js开发范式，可控性最高）

完全抛弃CSS伪类控制，用state变量控制菜单显隐，点击选项后直接关闭菜单，不会出现焦点残留问题：

import { useState } from 'react'

const CellComponent = () => {
  const [showOptions, setShowOptions] = useState(false)

  return (
    <div 
      className="icon-container-interaction"
      onClick={() => setShowOptions(!showOptions)}
      onBlur={() => setShowOptions(false)}
    >
      <div 
        className={`post-cell-options ${showOptions ? 'options-active' : ''}`}
        onClick={(e) => e.stopPropagation()}
      >
        <button onClick={() => {
          // 选项处理逻辑
          setShowOptions(false)
        }}>示例选项</button>
      </div>
    </div>
  )
}

配套CSS新增：

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

内容的提问来源于stack exchange，提问作者Aadhit Shanmugam