React onBlur检测

Question

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

我被设置为circle组件的onBlur，所以当我在元素外部单击时，侧边栏将被隐藏。

然而，这样做有一个问题，当我从名字A切换到名字B时，侧边栏将首先隐藏，然后显示。

当我从名字A切换到名字B时，有没有一种方法可以让侧边栏保持打开，如果我在circle元素之外单击而不使用swtich，那么侧边栏就会打开？

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

对于圆组件：

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