Реагировать на скользящее колесо Событие для дочерних компонентов (useRef)? - PullRequest
Новая
       5

Реагировать на скользящее колесо Событие для дочерних компонентов (useRef)?

1 голос
/ 12 февраля 2020

Я использую скользящий слайдер React. Я хотел реализовать событие wheel, чтобы, когда пользователь прокручивал трекпад, он менял текущий слайд. https://stackblitz.com/edit/react-slick-slider-issues Я использую useRef, чтобы сделать ссылку на ползунок, а затем вызываю скользкие функции внутри обратного вызова слушателя событий.

Было хорошо, когда это был только один дочерний компонент, но когда из любопытства я добавил того же дочернего элемента в родительский элемент ниже исходной ссылки. slickNext и slickPrev вызываются для обоих ползунков. это из-за того, что я использую useRef или есть способ вызывать гладкие функции, только когда пользователь находится на этом слайдере?

1 Ответ

1 голос
/ 12 февраля 2020

Это потому, что вы слушаете window.addEventListener, что означает, что везде, где пользователь прокручивает, оба ползунка запускают slickNext и slickPrev.

, если вы хотите активировать эти функции для каждого Слайдер, вы должны слушать scroll на самом компоненте root. 

useEffect(() => {
  if (!parentRef.current) {
    return;
  }
  parentRef.current.addEventListener('wheel', (e)=>handleScroll(e));

  return (() => {
    parentRef.current.removeEventListener('wheel',(e)=>handleScroll(e));
  });
}, [parentRef, rowData]);

<div ref={parentRef} style={{ backgroundColor: "green", height: "140px" }}>
  {...}
</div>

Рабочий пример: https://stackblitz.com/edit/react-slick-slider-issues-xunhy3?file=ReactSlider.js

...