SemanticUI按钮在点击后仍然处于活动状态

Question

import React from 'react'
import { Button } from 'semantic-ui-react'

const ButtonExampleShorthand = () => <Button content='Click Here' />

export default ButtonExampleShorthand

当你点击按钮时，它会变成灰色，并保持这样除非你点击其他地方。是否有可能使其在你点击后立即返回到初始状态（浅灰色）？

- guckmalmensch

Answer 1

任何一个（不仅限于Semantic-UI中的）都有许多不同的状态。这些状态可以通过CSS中的伪类pseudo-classes来选择和设置样式。

:hover是当您将鼠标悬停在按钮上时触发的。

:active是当您按下按钮但尚未释放点击时触发的。

:focus是当用户使用tab键将其浏览器的焦点集中在该元素上时触发的。

您在问题中提到的问题是由于“单击按钮会将浏览器的焦点设置在该按钮上”。释放点击并将鼠标移开后，该焦点仍然存在。

如果您的按钮的样式在:active和:focus时相同，那么它看起来就像按钮仍然被点击了（实际上只是该按钮具有影响样式的浏览器焦点）。单击页面上其他位置会将浏览器的焦点从按钮上移除，从而更新样式。

一个不推荐的解决方案是仅让:focus样式与按钮未被激活、悬停或聚焦时的样式相匹配。但是，这是不被鼓励的，因为辅助技术依赖于聚焦以正常工作。如果:focus没有样式变化，只使用键盘的用户将无法使用您的网站。

在React中，您需要使用createRef（或函数组件的useRef）来管理围绕按钮的焦点。Semantic-UI-react文档提供了一个有用的示例。请注意，您描述的行为也会发生在他们的示例按钮中。React文档还对此问题周围的思想进行了一些清晰的解释。

为了更好地理解焦点、悬停和活动状态，我建议阅读这篇文章，其中有出色的交互示例，可以澄清不同状态及其相互作用。

值得一提的是，Firefox、Chrome（以及可能其他带有开发者功能的浏览器）都有一个工具，可以切换/测试元素的状态。 这个（经过精美的Photoshop处理的）屏幕截图向你展示了在Firefox中找到该功能的位置。在Chrome中位置类似。

- Tyler Auer

Answer 2

这是关于编程的内容，翻译如下：

这是 Button 的焦点状态，我建议你在按钮上保持焦点状态，但是你可以通过以下方式覆盖该样式。

在你的 CSS 文件中添加以下内容：

.ui.button:focus: {
  background-color: #e0e1e2 none;
}

- Ioannis Potouridis

---

-1 是由 Tyler 提出的原因。此外，覆盖按钮的特定颜色可能会产生交互作用，如果您希望稍后使用其他 SemanticUI 按钮样式（活动、主要、基本）。 - eykanal

Answer 3

我通过创建一个CustomButton解决了这个问题。不知道这是否是最有效的解决方案。

import { Button } from 'semantic-ui-react'
import { useRef } from 'react'

const CustomButton = ({children, ...props}) => {
  const { onClick } = props 
  const buttonRef = useRef()
  const handleOnClick = ({...props}) => {
    buttonRef.current.ref.current.blur()
    if (onClick) {
      onClick(props)
    }
  }
  return (
    <Button {...props} ref={buttonRef} onClick={handleOnClick}>
      {children}
    </Button>
  )
}

export default CustomButton

- Dali