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

Question

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

谢谢！

Answer 1

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

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