杰霸霸博客

ahooks处理dom

ahooks也提供了不少操作原生DOM的钩子函数

1. 使用useEventListener

useEventListener和addEventListener不同点在于useEventListener不会向DOM重复注册事件：

jsx
import { Row, Col, Button } from 'antd'
import { useState,useRef  } from 'react'
import { useEventListener } from 'ahooks'

function App() {
  const [count, setCount] = useState(1)
  const ref = useRef(null)

  useEventListener(
    'click',
    () => {
      setCount(count + 1);
    },
    { target: ref },
  )

  return (
    <>
      <Row>
        <Col span={24}>
          {count}, {Date.now()}
        </Col>
        <Col span={24}>
          <Button type='primary' ref={ref} >点击</Button>
        </Col>
      </Row>
    </>
  )
}
export default App

运行效果：
Alt text 此外第二个参数还支持类似Vue中的事件修饰符：

参数 说明 类型 默认值
target DOM 节点或者 ref (() => Element) Element
capture 可选项，listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。 boolean false
once 可选项，listener 在添加之后最多只调用一次。如果是 true，listener 会在其被调用之后自动移除。 boolean false
passive 可选项，设置为 true 时，表示 listener 永远不会调用 preventDefault() 。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。 boolean false
enable 可选项，是否开启监听。 boolean true

2. 使用useEventTarget

常见表单控件(通过e.target.value获取表单值)的onChange跟value逻辑封装，支持自定义值转换和重置功能。

jsx
import React from 'react'
import { useEventTarget } from 'ahooks'

export default () => {
  const [value, { reset, onChange }] = useEventTarget({ initialValue: 'this is initial value' })

  return (
    <div>
      <input value={value} onChange={onChange} style={{ width: 200, marginRight: 20 }} />
      <button type="button" onClick={reset}>
        reset
      </button>
    </div>
  );
};
最后更新于: 2025-03-19 18:00

评论