Question

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

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}
      >

Answer 1

首先，您应该将事件监听器包装在useEffect中，并像这样使用addEventListener：

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

了解有关鼠标按下事件here的更多信息。您也可以搜索其他事件，我只是想指出正确的方向。

如何将事件侦听器分配给React.useRef

1 个答案: