react-window-infinite-loader材质-UI自动完成

时间:2019-11-23 23:48:05

标签: reactjs material-ui react-window

我正在尝试使用react-window-infinite-loader在material-ui自动完成下拉列表中显示一个无限滚动列表。当我滚动到列表的底部时,我想从服务器获取下一页的项目。我创建了a codesandbox example,将material-ui Autocomplete example for a virtualized listreact-window-infinite-loader example结合在一起。当我滚动到列表底部时,将加载下一页数据,但是某些原因导致列表滚动回到顶部。加载新数据后如何保持滚动位置?

谢谢!

1 个答案:

答案 0 :(得分:1)

我通过使用useAutocomplete钩子使它起作用。我创建了一个显示工作代码的沙箱: https://codesandbox.io/s/material-demo-0fbyb

只有一个问题,我仍然无法弄清楚。当按键盘上的向下箭头键选择列表中的项目时,您可以选择超出可见的项目“窗口”的项目。必须有一种使列表滚动到所选项目的方法。我猜这是因为需要在FixedSizeList组件上设置自动完成引用,但是当InfiniteLoader 需要将引用传递给FixedSizeList组件时,该怎么办呢?