单击后语义 UI 按钮仍处于活动状态

Question

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

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

export default ButtonExampleShorthand

当您单击该按钮时，它会变成灰色并保持不变，除非您单击其他地方。能不能点一下就return到初始状态（浅灰色）？

Answer 1

它是 Button 的焦点状态，我建议您将焦点状态保持在您的按钮上，但这里是您可以覆盖该样式的方法。

将此添加到您的 CSS 文件中：

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

Answer 2

任何<button>（不仅仅是Semantic-UI中的那些）都有许多不同的状态。这些状态可以用pseudo-classes在CSS.

:hover 是当你将鼠标移到按钮上时

:active 是指您已点击按钮但尚未松开。

:focus 是指用户使用 tab 键将浏览器聚焦在该元素上。

您在问题中提到的问题的出现是因为单击按钮会将浏览器的焦点设置在该按钮上。在您释放单击并将鼠标移离按钮后，此焦点仍然存在。

如果您的按钮样式与 :active 和 :focus 相同，则看起来按钮仍然被点击（但实际上按钮只是具有影响浏览器的焦点样式）。单击页面上的其他位置会将浏览器的焦点从按钮上移开，从而更新样式。

NOT 推荐的解决方案是让 :focus 样式与按钮未处于活动状态、悬停或聚焦时的样式相匹配。但是，这是不鼓励的，因为辅助技术依赖于专注才能正常工作。如果 :focus 没有发生任何样式更改，仅使用键盘的用户将无法使用您的网站。

在 React 中，您需要使用 createRef（或功能组件的 useRef）来管理按钮周围的焦点。 Semantic-UI-react 文档 an example that will be helpful. Note that the behavior you are describing also occurs with their example button. The React docs 也对围绕这个问题的想法有一些清晰的解释。

为了更好地理解焦点、悬停和活动，我推荐 this post，它有很好的交互示例，阐明了不同的状态以及它们如何交互。

还值得指出的是，Firefox Chrome（可能还有其他具有开发人员功能的浏览器）有一个工具，您可以在其中 toggle/test 元素的状态。

This (beautifully Photoshopped) screengrab shows you where to find that feature in Firefox. It's in a similar location in Chrome.

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

单击后语义 UI 按钮仍处于活动状态

SemanticUI Button still active after clicked

javascript

jsx

reactjs

semantic-ui