介绍
react-esc-resolver 是一个 React 组件，用于在按下 ESC 键时执行一些操作。它会将 ESC 事件传递给其子组件，并监听 ESC 事件，以及当 ESC 事件被触发时，执行回调函数。
安装
在项目中使用 npm 安装 react-esc-resolver：
npm install react-esc-resolver
使用
要使用 react-esc-resolver，需要将其作为父组件包装需要监听 ESC 事件的子组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ---------------------
-------- ------------------ -
----- ------------- - ------- -- -
-- -- --- -----
-- -------------- --- --- -
---------------- ---------
-
-
------ -
------------ --------------------------
-----
-- ---------- --- ------
------
--------------
--
-
------ ------- ------------在上面的代码中，我们使用 <EscResolver> 包装了一个 div 元素，并在 <EscResolver> 中传递了一个名为 handleKeyDown 的回调函数。当 ESC 键被按下时，会调用 handleKeyDown 函数。
示例
以下示例演示了如何使用 react-esc-resolver 监听 ESC 事件并在按下 ESC 键时关闭一个模态框。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----------- ---- ---------------------
-------- ------------ -
----- -------- ---------- - ----------------
----- ---------------- - -- -- -
-----------------
-
----- --------------- - -- -- -
----------------
-
----- ------------- - ------- -- -
-- -- --- -----
-- -------------- --- --- -
-------------------
-
-
------ -
-----
------- ----------------------------------------
------- -- -
------------ --------------------------
---- ------------------
---- --------------------------
--------------
------------
------- -----------------------------------------
------
------
--------------
--
------
--
-
------ ------- ------在上面的代码中，我们创建了一个名为 Modal 的组件，并创建了一个包含 handleCloseModal、handleOpenModal 和 handleKeyDown 函数的函数组件。
当用户点击「打开模态框」按钮时，handleOpenModal 函数将设置 isOpen 状态为 true，这将会渲染一个包含 <EscResolver> 组件的 <div> 元素。
当用户按下 ESC 键时，handleKeyDown 函数将会被调用，它将调用 handleCloseModal 函数并将 isOpen 状态设置为 false，以关闭模态框。
使用示例代码将演示实现的完整功能。
总结
react-esc-resolver 是一个非常简单的工具，但它确实可以大大提高 React 应用程序的用户体验。它可以帮助你在用户按下 ESC 键时执行一些自定义的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65258