如何将事件侦听器添加到 ref？

Question

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

这是一个示例，我尝试使用溢出自动获取某些 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 会滚动，因此外部 div 上不会触发 scroll 事件。将您的 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>
    );
}