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

【问题标题】：SemanticUI Button still active after clicked单击后，语义 UI 按钮仍处于活动状态
【发布时间】：2020-08-01 01:48:40
【问题描述】：

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

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

export default ButtonExampleShorthand

当您单击该按钮时，它会变为灰色并保持不变，除非您单击其他位置。是否可以在点击后立即恢复到初始状态（浅灰色）？

【问题讨论】：

标签： javascript reactjs jsx semantic-ui

【解决方案1】：

任何<button>（不仅仅是来自 Semantic-UI 的）都有许多不同的状态。这些状态可以通过 CSS 中的pseudo-classes 进行选择和设置样式。

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

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

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

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

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

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

在 React 中，您需要利用 createRef（或用于功能组件的 useRef）来管理按钮周围的焦点。 Semantic-UI-react 文档有an example that will be helpful。请注意，您所描述的行为也发生在他们的示例按钮上。 React docs也对围绕这个问题的想法有一些清晰的解释。

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

还值得指出的是，Firefox、Chrome（以及可能具有开发者功能的其他浏览器）都有一个工具，您可以在其中切换/测试元素的状态。

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

-1 出于泰勒所述的原因。此外，如果您希望稍后使用其他 SemanticUI 按钮样式（活动的、主要的、基本的），则使用类似的特定颜色覆盖按钮可以产生交互。

【解决方案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

【讨论】：