反应onBlur检测

Question

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

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

但是，这种方式存在一个问题，当我从名称A切换到名称B时，侧边栏将先被隐藏然后显示。

当我从名称A切换到名称B时，是否可以保持侧边栏打开，并且如果我在不旋转的情况下单击圆形元素之外，侧边栏将打开？

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

对于圆形组件：

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

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

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

侧边栏将根据调度方法显示/关闭，该操作只会更新侧边栏的打开状态。

Answer 1

这是我要解决的问题：

1. 将所有“名称”组件分配给参考（参考将是列表）
2. onBlur函数将检查用户是否单击其他名称，如果不是，则继续并关闭侧边栏，如果是，则什么也不做。

代码沙箱示例： https://codesandbox.io/s/unruffled-bash-2slgm?file=/src/App.js

您可以在第19至21行的代码中添加注释，以查看区别。

希望这会有所帮助：D