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

Question

如何使用ReactJS Hooks(16.8.+版本(将事件侦听器添加到ref？

这里有一个例子，我试图用overflow auto获取某个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>
);
}