React 事件处理程序未能在 onScroll 事件中触发

Question

我正在尝试监听滚动事件。 这是我转换后的原始代码。

document.addEventListener("scroll", function(){
const headerChange = document.querySelector("header");
if (window.scrollY > 0) {
headerChange.classList.add("scrolled");
} 
else {
headerChange.classList.remove("scrolled");
} 
})

虽然这是我在反应代码中转换它的方式..

const [isScrolling, setIsScrolling] = useState(false);
    const navRef = useRef();


    const navScroll = () => {

        setIsScrolling(window.scrollY > 0 ? 
        navRef.current.classList.add("scrolled") 
        :  navRef.current.classList.remove("scrolled"));
        console.log(navScroll)
    }

return (
<nav
    ref={navRef} 
    onScroll={() => isScrolling}>

</nav>

)

页面滚动时未能触发滚动事件

请问，滚动功能触发失败可能是什么原因？

Answer 1

你需要监听页面滚动，而不是

nav

滚动，所以你仍然需要使用

document.addEventListener('scroll', handleScroll);

。监听 DOM 事件是一个副作用，应该由

useEffect

处理。当事件被触发时，您应该更新状态，并且状态更改应该更改

className

-

className={isScrolling ? 'scrolled' : ''

。

const Header = () => {
  const [isScrolling, setIsScrolling] = useState(false);
  
  useEffect(() => {
    const handleScroll = () => setIsScrolling(window.scrollY > 0);
    
    document.addEventListener('scroll', handleScroll);
    
    return () => { // cleanup
      document.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <nav className={isScrolling ? 'scrolled' : ''}>
    ...
    </nav>
  )
}