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事件。将您的裁判更改为位于内部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>
    );
}

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

1 个答案: