javascript - 单击后语义 UI 按钮仍处于事件状态

Question

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

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

export default ButtonExampleShorthand

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

Answer 1

任意 <button> (不仅仅是来自 Semantic-UI 的)有许多不同的状态。可以使用 psuedo-classes 选择和设置这些状态的样式。在 CSS 中。:hover是当您将鼠标移到按钮上时:active是当您点击按钮但尚未释放您的点击时。:focus是当用户使用了 tab使他们的浏览器专注于该元素的关键。
您在问题中提到的问题是因为 单击按钮会将浏览器的焦点设置在该按钮上 .在您松开单击并将鼠标从按钮上移开后，此焦点仍然存在。
如果您的按钮样式与 :active 相同和 :focus它看起来好像按钮仍然被点击(但实际上按钮只有浏览器的焦点会影响样式)。单击页面上的其他位置会将浏览器的焦点从按钮上移除，从而更新样式。
A 不是 推荐的解决方案是只有 :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.