React - 防止标签切换时焦点脱离模式

我自己构建了一个反应模式。当我在模式打开时按 Tab 键时，焦点仍然转到背景页面。如何将焦点限制在模态框内的组件内？

下面的逻辑应该是什么？

onKeyPress (e) {
   if (e.keyCode === 9) {
       e.preventDefault();
      // logic here?
   }
}

反应模态代码：

<ReactModal onKeyPress={this.onKeyPress} >
   <input type="text"/>
   <input type="text"/>
</ReactModal>

好吧，你可以使用焦点陷阱来做到这一点。看看这个npm 模块 https://www.npmjs.com/package/focus-trap为了那个原因。只需将包含模态的内容用这样的焦点陷阱包裹起来即可。

    <FocusTrap
              focusTrapOptions={{
                ...
              }}
            >
              <div className="trap">
                <p>
                  Here is a focus trap
                  {' '}
                  <a href="#">with</a>
                  {' '}
                  <a href="#">some</a>
                  {' '}
                  <a href="#">focusable</a>
                  {' '}
                  parts.
                </p>
                <p>
                  <button onClick={this.someCallback}>
                    Click Me
                  </button>
                </p>
              </div>

</FocusTrap>

我不建议您实施此操作，而是建议您不要自己实施它。考虑到可访问性，很难做到正确。

相反，我建议您使用可访问的现成模态组件，例如react-modal。它是完全可定制的，您可以在其中放入任何您想要的内容，但它可以正确处理可访问性，以便盲人仍然可以使用您的模式。