在模态中反应焦点陷阱

【问题标题】：React Focus Trapping in a Modal在模态中反应焦点陷阱
【发布时间】：2020-03-11 00:01:34
【问题描述】：

我目前正在构建一个功能组件模态反应，我正在寻找一种工具来集中陷阱。

您有没有使用过或者您可以推荐的仍然受支持且与功能组件配合良好的东西？

提前非常感谢！

【问题讨论】：

标签： reactjs modal-dialog focus accessibility react-functional-component

【解决方案1】：

您可以查看 Material-UI，它提供了集成解决方案，例如 Dialog 到基础 Modal。根据您的范围，您可以选择最适合您的。

Modal 实现焦点捕获 TrapFocus 组件

【讨论】：

【解决方案2】：

这个库就是这样做的：https://github.com/activenode/react-use-focus-trap

npm install --save react-use-focus-trap

import React from "react";
import { useFocusTrap } from "react-use-focus-trap";

export function NiceModal() {
  const [trapRef] = useFocusTrap();

  return (
    <div class="my-weird-modal" ref={trapRef}>
      Foobar
    </div>
  );
}

【讨论】：