如何在react js中移除对按钮点击的关注？

Question

对于 a11y(accessibility)，我添加了这个无法更改的 css。我的演示应用程序中始终存在以下 css。我没有任何控制来更改该 css。

button:focus,
a:focus {
  outline-offset: 2px;
  outline-width: 2px !important;
  outline-style: dotted !important;
  outline-color: currentColor;
}

但问题是当我点击按钮时它会显示我 outline 。如何在按钮单击时删除该轮廓。

为了解决这个问题，我看到了两个选项。

1. 在点击时使用 blur 事件。它隐藏 outline 。 但有几秒钟它会显示轮廓。这对我不起作用
2. 使用此 pseudo https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible 。但它不适用于 safari

有没有更好的方法或任何习惯。取消对按钮点击的关注的钩子？

这是我的代码

https://codesandbox.io/s/angry-lamarr-lz586?file=/src/styles.css:59-207

function handleProductNavigation(event) {
    btnRef.current.blur();
    console.log(btnRef.current.blur);
    //event.currentTarget.blur();
  }

Answer 1

您可以将 :focus-visible 方法与 Safari 和旧 Chrome/Firefox 版本的 polyfill 结合使用：

https://github.com/WICG/focus-visible

该 polyfill 向使用键盘聚焦的元素添加了一个 focus-visible 类。