Как при скролле окна добавить кнопке класс active? React Js

Рейтинг: 0Ответов: 1Опубликовано: 25.03.2023

Есть страница с кнопкой <button className ="totopbtn">

Как при скролле добавить ей класс active?

Пробовал так:

export default function Home() {

    const [scroll, setScroll] = useState(0);
    useEffect(() => {
        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);
    const handleScroll = () => {
        setScroll(window.scrollY);
        document.querySelector("totopbtn").classList.add("totopbtn--active")
    };

    return (
    <button className='totopbtn' onClick={() => animateScroll.scrollToTop()}>to Top</button>
   )

Но так при скролле ругается, что кнопка null:

Cannot read properties of null (reading 'classList') TypeError: Cannot read properties of null (reading 'classList') at handleScroll

reactjs
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

1: ругается потому что console.log(document.querySelector("totopbtn")) равно null

2: querySelector("(точка)totopbtn") //.totopbtn

3: вместо того что бы брать с документа можно заюзать useRef

export default function Home() {
  const [scroll, setScroll] = useState(0);
  const buttonRef = useRef(null);
  useEffect(() => {
    const handleScroll = () => {
      setScroll(window.scrollY);
      if (ref.current) {
        if (!ref.current.classList.contains('active')) {
          ref.current.classList.add('active'); // "totopbtn active"
        }
      }
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <button ref={buttonRef} className="totopbtn" onClick={() => animateScroll.scrollToTop()}>
      to Top
    </button>
  );
}