Material-UI Popover 关闭时按钮无法触发

Question

我正在使用 Material-UI 4.11。 我已经设置了一个 Popover 组件以及一个 Button：

弹出框和按钮

<Popover
    id={id}
    open={open}
    anchorEl={anchorEl}
    onClose={handleClose}
    anchorOrigin={{
        vertical: "bottom",
        horizontal: "left"
    }}
    transformOrigin={{
        vertical: "top",
        horizontal: "left"
    }}
>
<SidebarDropdown />
</Popover>

<Button
    variant="contained"
    color="primary"
    onClick={handleAddProject}
>
+ADD PROJECT
</Button>

和他们的 function：

const handleClick = (event) => {
    setAnchorEl(event.currentTarget)
}

const handleClose = () => {
    setAnchorEl(null)
}
const open = Boolean(anchorEl)
const id = open ? "simple-popover" : undefined

const handleAddProject = () => {
    console.log("handleAddProject")
}

要触发按钮操作，我必须首先通过单击弹出窗口外的任何位置关闭弹出窗口，然后单击按钮。 这是两个动作。 只能一步到位吗？ 当我单击按钮时，弹出框关闭并触发按钮操作。

此 Popover 和 Button 不在同一个父元素上。

编辑

我一开始尝试的是：

const handleAddProject = () => {
    console.log("handleAddProject")
    setAnchorEl(null)
}

const handleClose = () => {
    setAnchorEl(null)
}

所以我希望当我单击按钮时，锚点是 null 然后弹出窗口关闭。 但是，它不起作用。

它以这种方式工作：

const handleAddProject = () => {
    console.log("handleAddProject")
}
    
const handleClose = () => {
    setAnchorEl(null)
    handleAddProject()
}

但这不是当我单击“添加项目”按钮并触发 Popover 关闭时。

组件结构如下： Button1 和 Popover 具有相同的父组件，它们处于同一级别。 Button2 远离 prent 组件。 如果 Popover 使用我的原始代码打开，则触发 Button1 和 Button2 的操作。 我必须先关闭弹出框，然后再次单击 button1 或 button2 才能触发按钮操作。 我想知道有没有办法可以将关闭与按钮绑定在一起？ 所以如果我点击按钮，它会关闭弹出框并触发它自己的动作？

Answer 1

啊，我想我得到了组件结构，做这样的事情：

将onSelect道具传递给SidebarDropdown 。 选择选项后，请确保调用该道具。 该道具的工作是在选择操作时关闭菜单。

例如

<Popover
    id={id}
    open={open}
    anchorEl={anchorEl}
    onClose={handleClose}
    anchorOrigin={{
        vertical: "bottom",
        horizontal: "left"
    }}
    transformOrigin={{
        vertical: "top",
        horizontal: "left"
    }}
>
 <SidebarDropdown onSelect={handleClose} />
</Popover>