如何将 onScroll 处理程序添加到反应选择组件的 menuList 中？

Question

我想将 onScroll 处理程序添加到反应选择组件的 menuList 中，但以下内容不起作用。我怀疑我需要onScroll为其中一个子元素设置 ，而不是为包含子元素的元素设置 ，但我不知道该怎么做。

import React from 'react';

import Select, { components, MenuListProps } from 'react-select';
import {
  ColourOption,
  colourOptions,
  FlavourOption,
  GroupedOption,
  groupedOptions,
} from './docs/data';


const handleScroll = () =>{
  console.log('scrolling')
}

const MenuList = (
  props: MenuListProps<ColourOption | FlavourOption, false, GroupedOption>
) => {
  return (
    <components.MenuList {...props}>
      <div onScroll={handleScroll}>
        {props.children}
      </div>
    </components.MenuList>
  );
};

export default () => (
  <Select<ColourOption | FlavourOption, false, GroupedOption>
    defaultValue={colourOptions[1]}
    menuIsOpen={true}
    options={groupedOptions}
    components={{ MenuList }}
  />
);

https://codesandbox.io/s/codesandboxer-example-forked-jr74k?file=/example.tsx:0-721

我也尝试过使用这样的东西

mySelectRef.current.menuListRef.addEventListener("scroll", handleScroll)

但.currentor.current.menuListRef在命令执行时始终未定义或为 null。我尝试使用 React.useEffect 和 setTimeout，但结果很差。我希望我可以通过设置onScroll正确的内部 div 来完成此任务。

Answer 1

您需要用该MenuList组件包装您的组件并div提供ref给该组件，然后访问该 HTML 组件的直接 div 子组件。onscroll然后您可以为该元素定义函数。

const MenuList = (
  props: MenuListProps<ColourOption | FlavourOption, false, GroupedOption>
) => {
  const menuListRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (menuListRef.current) {
      menuListRef.current.querySelector("div").onscroll = () => {
        console.log("scrolling");
      };
    }
  }, [menuListRef]);

  return (
    <div ref={menuListRef}>
      <components.MenuList {...props}>
        <div>{props.children}</div>
      </components.MenuList>
    </div>
  );
};