在流畅的用户界面中单击外部时，弹出窗口未关闭

Question

我在我的 React 应用程序中使用 Fluent ui Popover 组件。当我在弹出窗口组件外部单击时，它不会关闭。尽管在文档中，相同的代码可以按预期工作。 这是我的代码片段

                <Popover open={isFailurePopoverOpen} positioning={"below"} trapFocus>
                    <PopoverTrigger>
                        <Button>{"abc"}</Button>
                    </PopoverTrigger>
                    <PopoverSurface style={{ padding: "0px" }}>
                        <FailurePopupContent />
                    </PopoverSurface>
                </Popover>

我还尝试仅使用空的

<div>

组件而不是 PopoverTrigger 内的按钮，还尝试删除整个 PopoverTrigger。

这里是文档链接 - 这里。

我怎样才能让它发挥作用？难道我做错了什么？我是不是错过了什么？

Answer 1

由于弹出窗口是由 isFailurePopoverOpen 控制的，并且它是一个反应状态，这就是为什么它无法在外部点击时关闭。通过删除受控变量 isFailurePopoverOpen，弹出窗口将按预期工作。