Question

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

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

export default ButtonExampleShorthand

单击该按钮时，它将变为灰色并保持不变，除非您单击其他位置。单击后是否可以使其返回初始状态（浅灰色）？

Answer 1

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

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

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

Answer 2

任何<button>（不仅仅是来自Semantic-UI的状态）都可以处于多种不同的状态。可以在CSS中使用psuedo-classes来选择和设置这些状态。

:hover是将鼠标移到按钮上

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

:focus是指用户使用tab键将其浏览器聚焦于该元素上的情况。

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

如果您的按钮样式与:active和:focus相同，则好像按钮仍处于单击状态（但实际上按钮只是具有浏览器的焦点，这会影响样式））。单击页面上的其他位置可以从按钮上移开浏览器的焦点，从而更新样式。

不的推荐解决方案是，当按钮处于非活动状态，悬停或集中状态时，使:focus样式与样式匹配。但是，不建议这样做，因为辅助技术依赖于焦点才能正常工作。如果:focus的样式没有发生变化，纯键盘用户将无法使用您的网站。

在React中，您需要利用createRef（或对于功能组件使用useRef）来管理按钮周围的焦点。语义UI反应文档具有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.

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

单击后，SemanticUI按钮仍处于活动状态

3 个答案: