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

Question

我在 MenuItem（也从 MaterialUI 导入）内有一个 Popover（从 MaterialUI 导入）。我将弹出框的 open 属性设置为anchorEl 的布尔值。onClose 是处理anchorEl 的，如果我在弹出窗口之外单击，它应该将anchorEl 设置为null。然而，情况并非如此。一旦给了 DOMelement 的值，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>

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

我基本上是从文档（除了 menuItem 之外）复制了这个，所以我不知道为什么弹出窗口不会关闭......

Answer 1

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

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