React -- Material UI -- Popover, setAnchorEl(null) onClose 的 popover 出于某种原因没有将其设置为 null

Question

我在 MenuItem（也从 MaterialUI 导入）中有一个 Popover（从 MaterialUI 导入）。我将 popover 的 open 属性设置为 anchorEl 的布尔值。 onClose 是处理anchorEl 的，如果我在弹出框之外单击它应该将anchorEl 设置为null。然而，情况并非如此。一旦给定了 DOM 元素的值，an​​chorEl 就永远不会被设置为 null，而且我不确定我在这里做错了什么。

这是我的代码中对这个问题很重要的部分

    //state for the anchorEl (also handles the open/close for the popover)
    const [usernamePopoverAnchorEl, setUsernamePopoverAnchorEl] = React.useState<null | HTMLElement>(null);
    
    //handle popover open/close
    const handleUsernamePopoverClick = (e: any) => {
        setUsernamePopoverAnchorEl(e.currentTarget);
    }

    const usernamePopoverOpen = Boolean(usernamePopoverAnchorEl);

    const popoverHandleClose = () => {
        setUsernamePopoverAnchorEl(null);
        console.log(usernamePopoverAnchorEl);
    }
    
    //menuItems with the popovers that don't close
    <MenuItem onClick={handleUsernamePopoverClick}>
        <span>
            <p>Change username</p>
        </span>
        <Popover open={usernamePopoverOpen} anchorEl={usernamePopoverAnchorEl} onClose={popoverHandleClose}>
            <p>Testing helloooo!</p>
        </Popover>
    </MenuItem>

即使我在句柄关闭中设置了 setAnchorEl(null)，anchorEl 的值仍然是 HTML 元素（弹出框的锚点）。这是我在弹出框外单击时，anchorEl 控制台中的日志图片。

我基本上是从文档中复制的（除了 menuItem），所以我不知道为什么弹出框不会关闭...

Answer 1

尝试添加对我有用的 event.stopPropagation()。

const popoverHandleClose = (event) => {
            event.stopPropagation();
            setUsernamePopoverAnchorEl(null);
            console.log(usernamePopoverAnchorEl);
        }

Answer 2

const popoverHandleClose = () => {
        setUsernamePopoverAnchorEl(null);
        console.log(usernamePopoverAnchorEl);
}

您在状态更新之前记录变量。试试这个：

const popoverHandleClose = () => {
        setUsernamePopoverAnchorEl(null);
}
console.log(usernamePopoverAnchorEl);