如何将 onScroll 处理程序添加到 react-select 组件的 menuList？

Question

我想在 react-select 组件的 menuList 中添加一个 onScroll 处理程序，但以下内容不起作用。我怀疑我需要为其中一个孩子设置 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)

但.current 或.current.menuListRef 在命令执行时始终未定义或为空。我尝试使用 React.useEffect 和 setTimeout，但效果不佳。我希望我可以通过设置右侧内部 div 的onScroll 来完成此操作。

Answer 1

您需要用div 包装您的MenuList 组件，并向该组件提供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>
  );
};

Answer 2

基本原理

理想情况下，您不会从头开始实现自定义处理程序，而是重用或从开源社区已经存在和维护的挂钩开始。

在自己实现时，有一些注意事项，例如事件侦听器必须是被动的，并且您必须使用 React 的 useEffect 钩子注册和取消注册侦听器。

示例

那里有很多例子。一个可能是来自react-use 的implementation。

实施

您的组件可能如下所示：

const Component = () => {
  const ref = useRef();

  const { x, y } = useScroll(ref);

  return <MyComponent ref={ref} />
}

Answer 3

方法

我试图查找是否可以访问已支持 onScroll 属性的本机包装元素。如果您深入了解components documentation，您会发现Menu 组件接受innerProps，这是每个HTML 元素接受的常规HTMLAttributes。所以我所做的就是为innerProps 提供一个onScroll 属性。

代码

const Menu = (
  props: MenuProps<ColourOption | FlavourOption, false, GroupedOption>
) => {
  const handleScroll = () => {
    console.log("scrolling");
  };

  return (
    <components.Menu
      {...props}
      innerProps={{ ...props.innerProps, onScroll: handleScroll }}
    >
      {props.children}
    </components.Menu>
  );
};

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

工作示例