javascript - React modal - 如何使用 tab 键停止用户

我正在尝试在 React 中创建自己的简单模式，它显示了一个覆盖屏幕的灰色覆盖层，顶部有一个带有 OK 和 Cancel 按钮的框。

然而，我在网上看到的所有示例代码（包括 React 和普通 JS/jQuery）都存在同样的问题：当模式显示在屏幕上时，用户可以使用 tab 键访问“变灰”的控件" 通过覆盖，从而规避模态。

我已经看到了一些关于安装全局按键事件处理程序以在模式打开时丢弃键盘输入的建议，但这听起来有点笨拙，并且与 React 基于组件的性质不符。有没有更清洁的方法？

标签： javascriptreactjsmodal-dialog

在考虑了更多之后，我开始质疑这个要求的真正好处是什么。

我试图通过使其进入不应该处于的状态来阻止用户弄乱 UI（甚至可能是后端），但在我的情况下，他可以使用同时打开 2 个窗口来实现相同的结果，并且不能做任何危险的事情，所以我决定忍受它。