npm 包 react-event-names 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，常常需要使用事件来操作元素，而 React 作为一款流行的前端框架，也提供了丰富的事件机制。但是，在实际开发中，很容易遇到一些事件的名称不知道该怎么写，这时候，我们就需要使用一个 npm 包：react-event-names。

react-event-names 简介

react-event-names 是一个 npm 包，它提供了 React 所有事件的名称，包括合成事件和原生 DOM 事件。使用它可以帮助我们准确地书写事件名称，避免出现拼写错误、大小写错误等问题。

安装 react-event-names

使用 npm 安装 react-event-names：

npm install react-event-names

使用 react-event-names

在组件中引入 react-event-names：

-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------------

----- ----------- ------- --------------- -
  ------------- -
    ------------------ -------
  -

  -------- -
    ------ -
      -------
        --------------------------
        ------------------------------------
      -
        ----- ---
      ---------
    --
  -
-

上述代码中，我们在组件的 render 方法中使用了 onClick 和 onTouchStart 事件。这两个事件名称都是在 eventNames 中定义的，使用时只需要从 eventNames 中引入即可，例如：

-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------------

----- ----------- ------- --------------- -
  ------------- -
    ------------------ -------
  -

  ------------------ -
    ----------------------- -------
  -

  -------- -
    ------ -
      -------
        --------------------------
        -------------------------------------------------
      -
        ----- ---
      ---------
    --
  -
-

在这个示例中，我们使用 {eventNames.onTouchStart} 来代替了 onTouchStart 事件名称，这样可以避免写错事件名称。

合成事件和原生 DOM 事件

react-event-names 包含了 React 所有的合成事件和原生 DOM 事件，我们可以通过 eventNames 对象来获取它们的名称。

合成事件

React 提供了一些合成事件（SyntheticEvent），它们是跨浏览器兼容的，对于不同的浏览器，React 会自动选择最佳的事件实现。以下是 react-event-names 中定义的合成事件：

onCopy
onCut
onPaste
onCompositionEnd
onCompositionStart
onCompositionUpdate
onKeyDown
onKeyPress
onKeyUp
onFocus
onBlur
onChange
onInput
onSubmit
onClick
onContextMenu
onDoubleClick
onDrag
onDragEnd
onDragEnter
onDragExit
onDragLeave
onDragOver
onDragStart
onDrop
onMouseDown
onMouseEnter
onMouseLeave
onMouseMove
onMouseOut
onMouseOver
onMouseUp
onSelect
onTouchCancel
onTouchEnd
onTouchMove
onTouchStart
onScroll
onWheel

使用时，只需要从 eventNames 中引入即可，例如：

-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------------

----- ----------- ------- --------------- -
  ------------- -
    ------------------ -------
  -

  -------- -
    ------ -
      -------
        ---------------------------------------
      -
        ----- ---
      ---------
    --
  -
-

原生 DOM 事件

除了合成事件，React 还可以使用原生 DOM 事件。react-event-names 也提供了所有原生 DOM 事件的名称：

onAbort
onCanPlay
onCanPlayThrough
onDurationChange
onEmptied
onEncrypted
onEnded
onError
onLoadedData
onLoadedMetadata
onLoadStart
onPause
onPlay
onPlaying
onProgress
onRateChange
onSeeked
onSeeking
onStalled
onSuspend
onTimeUpdate
onVolumeChange
onWaiting

使用时，也只需要从 eventNames 中引入即可，例如：

-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------------

----- ----------- ------- --------------- -
  ------------ -
    ----------------- -------
  -

  -------- -
    ------ -
      ----
        -------------------
        -------------------------------------
      --
    --
  -
-

总结

使用 react-event-names 可以准确地书写 React 事件名称，避免出现拼写错误、大小写错误等问题，提高代码的可读性和可维护性。在开发 React 应用时，建议使用这个 npm 包来获取事件名称。

示例代码：

-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------------

----- ----------- ------- --------------- -
  ------------- -
    ------------------ -------
  -

  ------------------ -
    ----------------------- -------
  -

  ------------ -
    ----------------- -------
  -

  -------- -
    ------ -
      -----
        -------
          ---------------------------------------
          -------------------------------------------------
        -
          ----- ---
        ---------
        ----
          -------------------
          -------------------------------------
        --
      ------
    --
  -
-

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/react-event-names