reactjs - 如何将事件监听器添加到引用？

Question

如何向 添加事件监听器ref 使用 ReactJS Hooks(版本 16.8.+)？

这是一个示例，我尝试使用溢出自动获取某些 div 的滚动位置。 updateScrollPosition 永远不会被调用。

function Example(props) {
    scroller = useRef();    
    useEffect(() => {
        function updateScrollPosition() {
            // update the scroll position
        }
        if (scroller && scroller.current) {
            scroller.current.addEventListener("scroll", updateScrollPosition, false);
            return function cleanup() {
                 scroller.current.removeEventListener("scroll", updateScrollPosition, false);
            };
        }
    });
    return (
        <div ref={scroller}>
            <div className="overflow-auto">
                some text
            </div>
        </div>
    );
}

我感谢您的帮助

Answer 1

问题是您的外部 div 不会滚动，而是我们的内部 div 将滚动，因此 scroll事件不会在外部 div 上触发。将您的 ref 更改为内部 div，它应该可以工作

function Example(props) {
    const scroller = useRef();
 
    useEffect(() => {
        function updateScrollPosition() {
            // update the scroll position
        }

        if (scroller && scroller.current) {
            scroller.current.addEventListener("scroll", updateScrollPosition, false);
            return function cleanup() {
                 scroller.current.removeEventListener("scroll", updateScrollPosition, false);
            };
        }
    }, []);

    return (
        <div>
            <div ref={scroller} className="overflow-auto">
                some text
            </div>
        </div>
    );
}