Javascript 反应模糊检测

我有两个组件，一个是显示名称和圆圈，另一个是侧边栏。单击圆组件时，侧边栏将显示。当我单击圆组件的外部时，侧边栏将被隐藏

我将圆组件设置为onBlur，因此当我在元素外部单击时，侧边栏将被隐藏

然而，这种方式存在一个问题，当我从名称a切换到名称B时，边栏将首先隐藏，然后显示

当我从名称a切换到名称B时，有没有一种方法可以使侧栏保持打开状态？如果我在没有swtich的圆形元素外单击，侧栏将打开

下面是我的代码逻辑的一部分：

对于圆组件：

const handleParticipantOnClick = () => {
    dispatch(oepnSidebar())
}

const handleParticipantOnBlur = () => {
    dispatch(closeSidebar())
}

<div onBlur={handleParticipantOnBlur} onClick={handleParticipantOnClick}>
    <ProgressRing/>
</div>

const handleParticipantOnClick=（）=>{
分派（oepnSidebar（））
}
const handleParticipantOnBlur=（）=>{
分派（closeSidebar（））
}

侧栏将根据方法分派显示/关闭，该操作仅更新侧栏的打开状态

---

以下是我如何解决此问题的方法：

将所有名称组件分配给Ref（Ref将是一个列表）

onBlur函数将检查用户是否单击其他名称，如果没有，则继续并关闭侧边栏，如果是，则不执行任何操作

代码沙盒示例：

您可以从第19行到第21行对代码进行注释以查看差异

---

希望这有帮助：D

以下是我解决此问题的方法：

将所有名称组件分配给Ref（Ref将是一个列表）

onBlur函数将检查用户是否单击其他名称，如果没有，则继续并关闭侧边栏，如果是，则不执行任何操作

代码沙盒示例：

您可以从第19行到第21行对代码进行注释以查看差异

---

希望这有帮助：D

这能回答你的问题吗？这回答了你的问题吗？