如何在反应中消除对按钮点击的关注？

Question

我正在尝试移除对按钮单击的关注。实际上在我的 css 中是这样写的

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

当我点击按钮时，它会聚焦我的按钮，这是我的代码 https://codesandbox.io/s/new-snow-x8fih?file=/src/App.js

我已经尝试过 blur 事件

function handleProductNavigation(event) {
    btnRef.current.blur();
    console.log(btnRef.current.blur);
    //event.currentTarget.blur();
    //props.onChange(event, '0E3B648885C24A02B5B2676BEB82C7E9', '', 'rc20p2-open');
  }

点击后是这个样子

Answer 1

您的 blur 按预期工作，点击后轮廓消失。但是，如果您根本不想在点击时显示它并且只在 tab-focus 时显示它，那么有一个 :focus-visible 伪类，它基本上是仅以键盘为焦点并且它具有合理的浏览器支持。

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible