Слушатель событий в элементе className, React Js - PullRequest
Новая
       97

Слушатель событий в элементе className, React Js

0 голосов
/ 09 мая 2020

Как насчет друзей, у меня есть eventHandler, добавленный в div, который слушает, если пользователь прокручивает, чтобы скрыть панель навигации. Он отлично работает, поскольку контейнер, выполняющий функцию прокрутки, является телом, но если я добавлю стиль overflow: scroll к div, содержащему мои разделы, eventHandler больше не будет работать. Как я могу добавить этот же код в div, содержащий класс .layoutContainer? 

  useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true });
    window.addEventListener("touchmove", handleScroll, {
      passive: true,
    });
  }, []);

Я пытался выполнить getElementByClassName, но это не сработало. Надеюсь, ты сможешь мне помочь, спасибо

1 Ответ

1 голос
/ 09 мая 2020

Как это? 

// see https://stackoverflow.com/questions/35939886/find-first-scrollable-parent
function getScrollContainer(node) {
  while (node) {
    if (node.scrollHeight > node.clientHeight) {
      return node;
    }
    node = node.parentNode;
  }
  return null;
}

// we want a reference to the current DOM node
const ref = React.useRef(null);

useEffect(() => {
  // determine what element is scrolling
  const container = getScrollContainer(ref.current);
  if(!container) return;

  // add the event listener
  container.addEventListener("scroll", handleScroll, { passive: true });
  container.addEventListener("touchmove", handleScroll, { passive: true });

  return () => {
    // and clean up after yourself
    container.removeEventListener("scroll", handleScroll);
    container.removeEventListener("touchmove", handleScroll);
  }
}, [/* sure that this doesn't rely on some dependency, like some `isVisible` state? */]);

// set the ref so we get access to the DOM node
return <div ref={ref} ...

И если этот компонент не будет добавлен, а затем удален handleScroll, я почти уверен, что ваш эффект должен выполняться на основе некоторого зависимого значения, а не только на componentDidMount

...