javascript - 多个模式听同一个按键，我如何处理优先级？

问题描述

我试图找出问题背后的逻辑，我希望有人对如何解决这个问题有任何建议。

该应用程序是使用 React 构建的。

这是我的申请流程：

使用点击某物
弹出一个模态框，需要填写一个表单
填写表格后，用户单击“提交”按钮
在第一个模态的顶部弹出一个确认模态

出于可访问性和可用性的原因，我希望我的两个模态都监听ESC按键，以便可以轻松地从键盘上取消它们。我已经实现了这个并且它有效，但它不是很好。

我通过useEffect在渲染组件时调用一个来做到这一点：

  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.isComposing || e.keyCode === 27) {
        // close modal
      }
    };

    document.addEventListener('keydown', handler);
    return () => {
      document.removeEventListener('keydown', handler);
    };
  }, []);

我面临的问题是，如果两个模态都打开并被ESC按下，两个模态都会关闭。

您将如何设置首先关闭的模式的优先级？我考虑过有一个全局模态对象，我可以在其中检查哪个模态是最新添加的，但这似乎不必要地复杂。

我缺少一个简单的解决方案吗？

这是一个解释我的问题的简单图表。

标签： javascriptreactjs

javascript - 多个模式听同一个按键，我如何处理优先级？

问题描述

解决方案

推荐阅读