0

我有一个在移动设备上使用 HeadlessUI 的导航栏Popover作为汉堡菜单。默认情况下，当您单击/聚焦不在其中的元素时，此菜单会关闭。

现在我正在尝试添加一个模式（HeadlessUI Dialog），当单击弹出菜单中的按钮时，我想打开它。模态在ModalButton组件定义 ( <><button><dialog></>) 中使用。这样做是为了分离关注点（与模态相关的所有内容都在 内ModalButton）。

问题是：当我在导航栏的弹出菜单中并单击按钮以打开对话框时。浏览器关注这个新对话框，因此弹出框失去焦点，使其关闭。由于它关闭，按钮（以及对话框兄弟）不再呈现，因此对话框立即消失。

作为参考，这是反应树的伪代码：

<navbar>
  <popover>
    <>            {/* "ModalButton" containing both the button and the dialog */}
      <button />  {/* Button that opens the dialog */}
      <dialog />  {/* This uses a portal internally (with HeadlessUI) */}
    </>
  </popover>
</navbar>

我可以想出几种方法来解决这个问题，但都不是很好：

  1. 将模式拉到树中更高的位置，在弹出框/汉堡菜单之外，但仍在导航栏内。但这打破了关注点的分离，因为导航栏现在必须担心模式的打开状态。
  2. 将 modal 放在树的顶部某处，并使用某种全局状态（需要状态管理库）来处理 modal 的打开。
  3. 也许有一种方法可以防止Popover在专注于对话框时关闭？（但在聚焦任何不是对话框的东西时仍然允许它关闭）

我很想听听有关解决此问题的任何想法。

4

1 回答 1

1

您应该将对话框放在树的更高位置。通常这些可以在页面级别，甚至是应用程序级别，取决于这些对话框的全局性。

然后，您可以使用您最喜欢的全局状态管理器或useContext挂钩来告诉这些对话框以编程方式从应用程序的任何位置打开。

在这种情况下，弹出框自动关闭不再是问题。

于 2022-01-25T21:16:47.173 回答