useEventListener

import { useEffect, useRef } from "react"

export default function useEventListener(
  eventType,
  callback,
  element = window
) {
  const callbackRef = useRef(callback)

  useEffect(() => {
      callbackRef.current = callback
  }, [callback])

  useEffect(() => {
    if (element == null) return
    const handler = e => callbackRef.current(e)
    element.addEventListener(eventType, handler)

    return () => element.removeEventListener(eventType, handler)
  }, [eventType, element])
}

介绍

一个封装了处理事件监听的钩子函数，参数为事件类型和和一个回调函数。

使用方法

实时编辑器

function EventListenerComponent() {
  const [key, setKey] = useState("")
  useEventListener("keydown", e => {
    setKey(e.key)
  })

  return <div>你按下了按键: {key}</div>
}

结果

Loading...

随意按下键盘上的按键，观察以上的输出结果。