如何將事件偵聽器添加到 ref？

Question

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

這是一個示例，我嘗試使用溢出自動獲取某些 div 的滾動 position。 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>
    );
}