React Material-UI Select未检测到滚动事件

Posted 2023-02-22

【中文标题】React Material-UI Select未检测到滚动事件

【英文标题】：React Material-UI Select not detecting scroll event

【发布时间】：2021-06-27 11:54:46

【问题描述】：

我在理解应该如何使用 Material-UI 检测带有 Select 组件的滚动事件时遇到了一些麻烦。

我有一个具有MenuProps=... 的 Select。我希望能够收听此 Select 中的滚动事件，所以我正在做的是将 onScroll 放入 MenuProps=... 中。但该事件从未被触发。

我已经尝试过的：

在MenuProps=... 中的样式对象旁边放置一个overflow: 'auto'。它会导致列表闪烁一秒钟（在 Select 顶部而不是底部）然后消失。 我实际上是这样的： https://codesandbox.io/s/autocomplete-not-scrolling-example-k5ltg

有人可以帮帮我吗？

【问题讨论】：

我认为主要问题是它指的是选择输入本身，如果我没有弄错材料 ui 显示一个带有列表和列表项的 div 作为下拉列表，与下拉输入本身分开。所以我不确定 onScroll 会按预期工作。此外，如果您测试 onlick 它仅应用于选择输入字段本身

【参考方案1】：

在Material-UI源代码挖掘之后，我发现你需要将滚动监听器附加到Paper component，所以这是工作代码：

MenuProps=
  PaperProps: 
    onScroll: (event: any) => 
      console.log(event);
      console.log("we scroll");
    
  ,

现场演示