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

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