4

我在项目中使用Material-UI中的自动完成组件。由于我有很多渲染选项，因此虚拟化将非常有益。所以我从文档中的虚拟化示例react-window开始，使用. 一切都很好，但是该项目已经依赖于react-virtualized，我想避免添加一个解决类似问题的新项目。因此，基于示例，我尝试使用fromreact-window重新实现它。Listreact-virtualized

代码示例

https://codesandbox.io/s/sleepy-hypatia-igog8?fontsize=14&hidenavigation=1&module=%2Fsrc%2FVirtualizedAutocomplete.js&theme=dark

问题

如上面的沙箱所示，它有点工作。不起作用的是键盘导航。您可以使用键盘导航，但是Listbox当您在可见元素之外导航时，不会滚动到突出显示的值。

我试过的：

  • 覆盖组件onKeyDown。Autocomplete然而，这完全覆盖了 keydown 功能，需要我重新实现它。
  • onKeyUp用于保留onKeyDown功能并找到具有data-focus属性的元素，然后scrollToIndex在List组件上使用。这适用于某些情况，但如果用户按住键一段时间并最终出现在过度扫描渲染项目之外的索引上，它就会中断。

有没有人有一个很好的方法react-virtualized来虚拟化 Material-UI Autoselect 组件中的选项？我应该使用其他东西List吗？

我最后的手段是使用useAutocomplete钩子并重新实现渲染逻辑，但由于我只是在虚拟化之后我想尽可能避免这种情况。

4

1 回答 1

10

由于我在 Material-UI repo 上打开的一个问题中的答案，我设法让它工作。

要使滚动功能正常工作，您需要确保滚动元素具有“列表框”的角色。

这是演示工作版本的代码的更新示例： https ://codesandbox.io/s/adoring-saha-n9cr1

唯一改变的是role从 ListboxComponent 道具中提取属性并将其分配给List组件。

于 2019-12-10T08:16:13.407 回答