@10up/react-focus-trap-hoc 中文文档教程

Question

react-focus-trap-hoc 1.0.1

React 焦点陷阱是一个高阶组件，旨在用于 React 应用程序中可能需要焦点的组件被驱动到它，然后被困在其中，直到用户采取另一个动作。 一个典型的例子就是模态。 从可访问性的角度来看，使用键盘导航站点的用户可能会激活模态，焦点可以被驱动到模态，然后保留在模态内，这样用户就可以浏览内容而不会在模态外失去焦点。

Instalation

NPM

npm install @10up/react-focus-trap-hoc --save

Yarn

yarn add @10up/react-focus-trap-hoc --save

Usage

让我们以下面的文件为例：

  // Modal.jsgs
  import React, { Component } from 'react';

  class Modal extends Component {
    constructor(props) {
      super(props);

      this.state = {
        isOpen: false,
      }
    }

    // Other methods here that handle the actual open and close function of the modal.

    render() {
      return(
        <div id="modal">
          <p>Super fancy content with <a href="#">focusable elements</a> within the modal!</p>
          <button>Just a button here</button>
        </div>
      );
    }
  }

  export default Modal;

为了确保焦点保留在你的组件中，只需添加以下内容：

  // Modal.js
  import React, { Component } from 'react';
+ import trapHOC from 'react-focus-trap-hoc';

  class Modal extends Component {
    constructor(props) {
      super(props);

      this.state = {
        isOpen: false,
      }
    }

+   componentDidMount() {
+     if (this.state.searchOpen === true) {
+       this.props.activateTrap();
+      } else {
+       this.props.deactivateTrap();
+     }
+   }

    // Other methods here that handle the actual open and close function of the modal.

    render() {
      return(
        <div id="modal">
          <p>Super fancy content with <a href="#"></a>focusable elements</a> within the modal!</p>
          <button>Just a button here</button>
        </div>
      );
    }
  }

- export default Modal;
+ export default trapHoc()(Modal);

Documentation

trapHoc(options={ trapIsActive: false })(YourWrappedComponent);

React focus trap HOC allows you to pass options to HOC 本身。 默认情况下 trapIsActive 设置为 false。 这个选项决定了焦点是否应该在一开始就被困住。 这需要设置为 true 例如，当使用带有无状态功能组件的 React focus trap HOC 时。

React focus trap HOC 还将两个函数作为 props 传递给包装的组件：

activateTrap()

activateTrap() 更改 HOC 上的状态，告诉它陷阱处于活动状态。

deactivateTrap()

deactivateTrap() 更改 HOC 上的状态，告诉它陷阱处于非活动状态。

activateTrap() 和 deactivateTrap() 必须在包装组件的状态发生变化时在您的组件上触发。

Contribute

有什么帮助或有什么建议？ 打开一个新工单，我们可以讨论它或提交拉取请求。 感谢您的关注！

License

麻省理工学院