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

Question

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

谢谢！

标签： reactjsmaterial-uireact-window

Answer 1

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

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