如何使用JS中的React中创建TAB陷阱？

Question

我有一个模态窗口，当用户按在该过程中的某个按钮上时将打开。

为了访问，我需要该选项卡在模式窗口内。

现在，不幸的是，该标签在所有页面上都可以使用。

如何在模态内捕获选项卡？

演示： https://codesandbox.io/s/jolly/s/jolly/s/jolly/s/jolly/s/jolly -wood-pequk1？file =/src/app.js

孩子道具将是我为每个页面动态传递的两个按钮组件。

import React from 'react'
import E from './Modal.style'

const Modal = (props) => {
  const {
    children,
    modalHeader,
    modalText,
    left,
  } = props

  window.onload = () => {
    const firstAnchor = document.getElementById('dialog-start');
    const lastAnchor = document.getElementById('dialog-end');

    function keydownHandler(e) {
      const evt = e || window.event;
      const keyCode = evt.which || evt.keyCode;
      if (keyCode === 9) { // TAB pressed
        if (evt.preventDefault) evt.preventDefault();
        else evt.returnValue = false;
        firstAnchor.focus();
      }
    }

    if (lastAnchor.addEventListener) lastAnchor.addEventListener('keydown', keydownHandler, false);
    else if (lastAnchor.attachEvent) lastAnchor.attachEvent('onkeydown', keydownHandler);
  }
  return (
    <E.Root left={left}>
      <div className="modal" tabIndex="-1" id="dialog-start">
        <button type="button" className="xButton" onFocus>X</button>
        {modalHeader && <h3>{modalHeader}</h3>}
        {modalText && <span className="modalText">{modalText}</span>}
        <E.ButtonWrapper id="dialog-end">
          {children}
        </E.ButtonWrapper>
      </div>
    </E.Root>
  )
};

export default Modal;

Answer 1

如果您可以使用软件包，那么此软件包真的很容易使用以实现此 https://www.npmjs.com/package/focus-trap-react

他们给出的示例也使用了一种模态:)，

<FocusTrap>
  <div id="modal-dialog" className="modal" >
    <button>Ok</button>
    <button>Cancel</button>
  </div>
</FocusTrap>

所以您可以做：

<FocusTrap>
 <E.Root left={left}>
      <div className="modal" tabIndex="-1" id="dialog-start">
        <button type="button" className="xButton" onFocus>X</button>
        {modalHeader && <h3>{modalHeader}</h3>}
        {modalText && <span className="modalText">{modalText}</span>}
        <E.ButtonWrapper id="dialog-end">
          {children}
        </E.ButtonWrapper>
      </div>
    </E.Root>
</FocusTrap>