React中点击按钮后如何移除按钮的焦点状态与outline样式

问题根因 #

你遇到的问题核心来自两点：一是CSS的:focus伪类会匹配所有触发元素聚焦的场景（包括鼠标点击、键盘导航、JS主动聚焦），二是你在点击事件回调中执行blur()的时机不对，浏览器默认的聚焦行为发生在click事件触发之前，同步执行的blur会被后续的默认聚焦逻辑覆盖。

解决方案（按推荐优先级排序） #

方案1：使用:focus-visible伪类（最优，符合无障碍规范）

这是W3C推荐的标准方案，专门用来区分不同输入设备的聚焦场景：只有用键盘导航聚焦元素时才会显示聚焦样式，鼠标点击触发的聚焦不会匹配该伪类，完全不需要额外写JS逻辑。
修改你的CSS如下：

/* 兼容不支持:focus-visible的老浏览器，保留兜底样式 */
button:focus,
a:focus {
  outline-offset: 2px;
  outline-width: 2px !important;
  outline-style: dotted !important;
  outline-color: currentColor;
}
/* 支持:focus-visible的浏览器，鼠标点击时隐藏聚焦样式 */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none !important;
}

该方案既保留了键盘用户需要的无障碍聚焦提示，又完美解决了鼠标点击后残留聚焦样式的问题。

方案2：调整JS blur的执行时机

如果你必须保留原有:focus的逻辑，可以通过调整blur的执行时机解决问题：

• 异步执行blur，等浏览器默认聚焦行为完成后再调用：

function handleProductNavigation(event) {
  // 加入异步队列，避开默认聚焦逻辑的执行时机
  setTimeout(() => {
    btnRef.current?.blur();
  }, 0);
  // 其他业务逻辑
  // props.onChange(event, '0E3B648885C24A02B5B2676BEB82C7E9', '', 'rc20p2-open');
}

• 也可以绑定mousedown事件直接阻止默认聚焦行为，不会影响后续点击事件触发：

function handleMouseDown(event) {
  event.preventDefault();
}
// 给按钮添加属性：onMouseDown={handleMouseDown}

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