如何在反应js中消除对按钮单击的关注？答案

【问题标题】：how to remove focus on button click in react js?如何在反应js中消除对按钮单击的关注？
【发布时间】：2021-06-09 11:37:27
【问题描述】：

对于 a11y（可访问性），我添加了这个我无法更改的 css。下面的 css 始终存在于我的演示应用程序中。我无法控制更改该 CSS。

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

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

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

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

有没有更好的方法或任何习惯。钩子移除按钮点击的焦点？

这是我的代码

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

【问题讨论】：

那个 MDN 页面引用了 Safari 的 polyfill。也许这对你有用？
:focus-visible 是要走的路。对于 Safari，您可以引入一个 polyfill 或添加一个 shame.css 以及一些好的旧黑客技术：button:focus:not(:focus-visible) { outline-color: transparent !important; }
你能检查一下这个问题吗stackoverflow.com/questions/67901731/…
无法在 safari 浏览器上运行 ..我已经完成了答案 codesandbox.io/s/charming-paper-k7bg3?file=/src/styles.css 中提到的所有步骤

【解决方案1】：

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

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

【讨论】：

能否请您更改codesandbox如何使用polyfil
@user944513 我看到您提出了一个问题，即由于默认的 Safari 选项卡行为，根本无法聚焦按钮。你设法解决了吗？我可能会尝试帮助您解决样式问题，但如果是关于默认行为问题，则 polyfill 是不够的。