如何在反應中消除對按鈕單擊的關注？

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按預期工作，單擊后輪廓消失。 但是，如果您根本不想在單擊時顯示它並且只為選項卡焦點顯示它，那么有一個:focus-visible偽類，它基本上是僅鍵盤焦點，並且它具有合理的瀏覽器支持。

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