时间戳

首页 > 解决方案 > 如何将事件监听器分配给 React.useRef

javascript - 如何将事件监听器分配给 React.useRef

问题描述

我需要使用句柄元素滚动 div。我将功能包装在一个钩子中。我为句柄元素创建了一个引用，但它不允许为它分配事件侦听器。我想避免使用元素内联事件侦听器，这可能吗？

import React from "react";

export default function useScrollOnDrag() {
    const refX = React.useRef(null);
    const refY = React.useRef(null);

    const [scrollState, setScrollState] = React.useState({
        isScrolling: false,
        clientX: 0,
        scrollX: 0,
        clientY: 0,
        scrollY: 0,
    });

    refX.current.onmousedown((e) => {
        setScrollState({ ...scrollState, isScrolling: true, clientX: e.clientX });
    });
    refX.current.onmousemp(() => {
        setScrollState({ ...scrollState, isScrolling: false });
    });

    refX.current.onmousemove((e) => {
        const { clientX, scrollX, isScrolling } = scrollState;
        if (isScrolling) {
            refX.current.parentElement.scrollLeft = scrollX + e.clientX - clientX;
            setScrollState({ ...scrollState, scrollX: scrollX + e.clientX - clientX, clientX: e.clientX });
        }
    });
    return [refX];
}

然后导入钩子并像这样使用它：

const [scrollHandle] = useScrollOnDrag()
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2 ref={scrollHandle}>Start editing to see some magic happen!</h2>
    </div>
  );

运行示例：https ://codesandbox.io/s/boring-haze-lzfxm?file=/src/index.js

我要避免的是创建这样的听众

     <div
        ref={ref}
        onMouseDown={onMouseDown}
        onMouseUp={onMouseUp}
        onMouseMove={onMouseMove}
      >

标签： javascriptreactjsevent-listener

解决方案

首先，您应该将事件侦听器包装起来useEffect并使用addEventListener如下：

  React.useEffect(() => {
    refX.current.addEventListener("mousedown", e => {
      setScrollState(prevState => ({
        ...prevState,
        isScrolling: true,
        clientX: e.clientX
      }));
    });
  }, []);

在此处阅读有关 mousedown 事件的更多信息。你也可以搜索其他事件，我只是想指出正确的方向。

推荐阅读