Как описать события типа прокрутки? - PullRequest
Новая
       22

Как описать события типа прокрутки?

1 голос
/ 16 мая 2019

Я добавил слушателя при прокрутке и попытался использовать событие.Как я могу описать тип вместо любого?

Реагировать 16.8.6 Tpescript 3.4 

const Component: FC<IProps> = ({ children, scrollOffset, getScrollTop, videoListScrollUpdate }) => {
    const scroller = useRef<HTMLDivElement>(null)

    useEffect(() => {
        if (scrollOffset && scroller.current) {
            scroller.current.scrollTop = scrollOffset
            return
        }
        if (getScrollTop && scroller.current) {
            scroller.current.addEventListener('scroll', (e: any) => getScrollTop(e.target.scrollTop))
        }
    }, [])

}

1 Ответ

0 голосов
/ 24 июня 2019

Вы можете использовать (e: React.UIEvent<HTMLElement>).Описано в UIEvent от SyntheticEvents.

Тем не менее, я бы рекомендовал не использовать useRef в useEffect. Сложно определить, был ли useEffect вызван повторно и scroller.current не является нулевым (даже console.log может вводить в заблуждение по этому поводу).

Однако я бы предложил вместо этого использовать встроенную опору onScroll для компонента, к которому вы присоединяете ref, и дать ему обратный вызов для обработки прокрутки.Таким образом, вам не нужно прикреплять его вручную в хуке useEffect, где вы забыли удалить его при размонтировании (проблемы утечки памяти). 

interface IProps {
  children: React.ReactNode;
  getScrollTop: (scrollTop: number) => whatever;
  // Your other Props
}

const ScrollComponent: React.FC<IProps> = ({
  children,
  getScrollTop,
  // Your other props
}): JSX.Element => {
  const handleScroll = (e: React.UIEvent<HTMLElement>): void => {
    e.stopPropagation() // Handy if you want to prevent event bubbling to scrollable parent
    console.log({
      event: e,
      target: e.target, // Note 1* scrollTop is undefined on e.target
      currentTarget: e.currentTarget,
      scrollTop: e.currentTarget.scrollTop,
    });

    const { scrollTop } = e.currentTarget;
    getScrollTop(scrollTop);
  };

  return (
  <div
    // I am assuming you were referencing your scroller as follows.
    // ref={scroller}
    onScroll={handleScroll} // Use the onScroll prop instead.
  >
    {children}
  </div>
  );
};

Note *1: scrollTop не будет доступно в e.target.scrollTop, как вы можете видеть в console.log, но в e.currentTarget.scrollTop, поскольку currentTarget вызывает элемент, к которому подключен обработчик события.

...