React-Composite-Events 是一个 NPM 包，它可以轻松创建组合事件，并使你可以在 React 中重复使用这些事件。本文将教你如何使用这个包。
开始前准备
你需要已经安装了以下内容：
- Node.js 和 npm
- 一个新的 React 项目
安装
在项目目录下使用 npm 安装 react-composite-events：
npm install react-composite-events
使用
在文件中引入 react-composite-events：
import { CompositeEvent } from 'react-composite-events';基本示例
让我们开始使用一个非常简单的示例。下面的代码展示了如何创建一个组合事件，我们将在点击按钮时触发这个事件并在控制台中输出消息：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- -------------------------
-------- ----- -
----- ----------- - -- -- -
------------------- --- -----------
--
------ -
-----
--------------- ------------------- ----------------------
--------
----- ---
---------
-----------------
------
--
-
------ ------- ----上面的示例中，我们传递一个字符串数组给 event 属性，该数组名称为 onClick。我们还传递了一个 handler，该函数将在用户单击按钮时被调用。
复杂示例
让我们来看一个更复杂的例子。在下面的代码片段中，我们创建了一个名为 CompositeButton 的组件，并使用它创建了两个按钮。当这些按钮被单击时，我们将触发它们各自的事件处理器，然后输出消息。组件的实现如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- -------------------------
-------- ----------------- --------- -------- ------------- -- -
------ -
---------------
------------------ -----------------
---------------- -- -
----- - ---- - - ------
-------------------- ---------
--
-
------- ----------------- ------------------------------
----------
---------
-----------------
--
-
------ ------- ----------------这里我们创建了一个 CompositeButton 组件，该组件包含两个事件处理器：onClick 和 onDoubleClick。在组件中，我们传递一个名为 event 的字符串数组给 CompositeEvent 组件。该数组包含待处理事件的名称。我们传递了一个名为 handler 的函数，该函数接收单击或双击事件的名称。最后，像往常一样，我们在渲染时将子元素传递给组件。
在我们的主组件中，我们可以像下面这样使用 CompositeButton：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- ---- --------------------
-------- ----- -
----- ----------- - -- -- -
------------------- ---------
--
----- ----------------- - -- -- -
------------------- ---------
--
------ -
-----
---------------- --------------------- ----------------------------------
----- ---
------------------
------
--
-
------ ------- ----在这个 App 组件中，我们定义了名为 handleClick 和 handleDoubleClick 的两个事件处理器。后者将在用户双击按钮时调用。我们将这些处理器传递给 CompositeButton 组件。
现在，我们可以运行应用程序，并在控制台中查看输出。当用户单击按钮时，我们将看到消息 onClick fired!。当用户双击按钮时，我们将看到消息 onDoubleClick fired!。
总结
React-Composite-Events 是一个使组合事件更易于使用的 NPM 包。在本文中，我们介绍了如何安装和使用它，以及如何创建非常简单的组合事件。我们还创建了一个稍微复杂的组件，并观察了它的行为。我希望这篇文章能帮助您开始使用这个包并创建自己的组合事件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005605381e8991b448de7a7