Material-UI SelectField如何实现菜单滚动到底部触发API加载新选项

你提到的react-select原生onMenuScrollToBottom能力，本质是给滚动列表封装了触底判断的逻辑，而MUI Select本身没有内置这类回调，完全可以通过拿到下拉菜单实际的滚动容器DOM、手动监听滚动事件判断触底来实现等效效果，整套逻辑不需要替换你当前在redux-form-material-ui中使用的SelectField组件。

第一步：利用透传属性拿到滚动容器实例 #

redux-form-material-ui的SelectField本质是对MUI v4原生Select的轻量封装，所有传给SelectField的MenuProps参数，都会100%透传到内部Menu组件上，不需要修改组件源码：

// 组件内提前定义需要的 ref，避免高频滚动事件触发无意义重渲染
const scrollContainerRef = useRef(null);
const isLoadingRef = useRef(false); // 标记当前是否正在请求数据，防止重复发请求
const hasMoreRef = useRef(true); // 标记是否还有未加载的选项
const PAGE_SIZE = 20; // 和后端约定的分页大小

<Field
  name="targetSelectField"
  component={SelectField}
  // 保留你原有的所有配置项：options、onChange、label等
  MenuProps={{
    // 菜单完全展开后，获取滚动列表的DOM并绑定滚动监听
    onEntered: () => {
      // 给当前Menu设置唯一id，避免多Select场景下选错DOM
      const menuEl = document.getElementById('infinite-scroll-select-menu');
      scrollContainerRef.current = menuEl.querySelector('.MuiMenu-list');
      scrollContainerRef.current.addEventListener('scroll', handleMenuScroll);
    },
    // 菜单关闭后，清理事件监听，防止内存泄漏
    onExited: () => {
      if (scrollContainerRef.current) {
        scrollContainerRef.current.removeEventListener('scroll', handleMenuScroll);
        scrollContainerRef.current = null;
      }
      isLoadingRef.current = false;
    },
    // 给当前Menu设置唯一id，和上面的查询逻辑对应
    id: 'infinite-scroll-select-menu',
    // 保留你原有的Menu配置：弹层位置、滚动属性等
    getContentAnchorEl: null,
    anchorOrigin: {
      vertical: "bottom",
      horizontal: "left",
    },
  }}
/>

第二步：实现滚动触底的判断和加载逻辑 #

编写滚动监听的处理函数，加入提前加载的阈值，避免用户滚到底才看到加载状态：

const handleMenuScroll = (e) => {
  const container = e.target;
  // 计算当前滚动位置
  const currentScroll = container.scrollTop + container.clientHeight;
  // 滚动容器的总内容高度
  const totalHeight = container.scrollHeight;
  // 设置30px的提前触发阈值，比真的滚到底再加载体验更顺畅
  const triggerThreshold = 30;

  // 同时满足三个条件才触发加载：不在加载中、还有更多数据、到达触发阈值
  if (!isLoadingRef.current && hasMoreRef.current && currentScroll >= totalHeight - triggerThreshold) {
    isLoadingRef.current = true;
    // 调用你的分页加载接口，拿到下一页的选项
    fetchOptionsPage({ page: nextPage, pageSize: PAGE_SIZE })
      .then((newOptions) => {
        // 把新选项合并到原有下拉列表里
        setOptions(prev => [...prev, ...newOptions]);
        // 如果接口返回的选项数小于分页大小，说明已经没有下一页了
        if (newOptions.length < PAGE_SIZE) {
          hasMoreRef.current = false;
        }
      })
      .finally(() => {
        isLoadingRef.current = false;
      })
  }
}

高频踩坑点 #

• 不要把滚动的判断状态（是否加载、是否有更多）存在React state里：scroll事件是高频触发的，每次修改state都会导致组件重渲染，用useRef存这些标记值，只有拿到新选项需要更新下拉列表时，再修改对应状态即可
• 多Select场景必须给每个Menu设置唯一id：如果直接用类选择器全局找.MuiMenu-list，很容易拿到其他页面Select的滚动容器，导致监听逻辑错位
• 必须在菜单关闭时移除事件监听：如果漏了这步，多次打开关闭菜单会给同一个容器绑定多个重复的scroll监听，一次滚动会触发好几次重复的API请求
• MUI版本适配注意：后续如果项目升级到MUI v5，下拉滚动容器的类名会从.MuiMenu-list变成.MuiList-root，只需要调整DOM选择的类名就行，整套逻辑不需要改动

内容的提问来源于stack exchange，提问作者RamAlx