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

Posted 2023-02-22

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

【英文标题】：React -- Material UI -- Popover, setAnchorEl(null) onClose of the popover does not set it to null for some reason

【发布时间】：2021-02-05 18:25:56

【问题描述】：

我在 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），所以我不知道为什么弹出框不会关闭...

【参考方案1】：

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

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

【参考方案2】：

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

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

const popoverHandleClose = () => 
        setUsernamePopoverAnchorEl(null);

console.log(usernamePopoverAnchorEl);

【讨论】：

我把console.log放到了函数之外。它仍然返回 htmlElement 而不是 null。这就像 popoverHandleClose 由于某种原因无法正常工作......

可能是因为它是onClose，而不是close