我如何将Material-UI自动完成功能与react-virtualized一起使用?

问题描述 投票:0回答:1

我在项目中使用Autocomplete component from Material-UI。由于我有很多渲染选项,因此虚拟化将非常有益。因此,我从文档中的the virtualized example开始使用react-window。一切工作都很好,但是该项目已经依赖react-virtualized了,我想避免添加一个新的解决类似问题的方法。因此,基于react-window示例,我尝试使用List中的react-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自动选择组件中的选项吗?我应该使用List以外的其他东西吗?

    [我的最后选择是使用useAutocomplete钩子并重新实现渲染逻辑,但是由于我只是在虚拟化之后才想避免这种情况。

  • javascript reactjs material-ui react-virtualized ui-virtualization
    1个回答
    0
    投票
    由于an issue I opened about this on the Material-UI repo中的回答,我设法使它正常工作。

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

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

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

    © www.soinside.com 2019 - 2024. All rights reserved.