我在项目中使用Autocomplete component from Material-UI。由于我有很多渲染选项,因此虚拟化将非常有益。因此,我从文档中的the virtualized example开始使用react-window
。一切工作都很好,但是该项目已经依赖react-virtualized
了,我想避免添加一个新的解决类似问题的方法。因此,基于react-window
示例,我尝试使用List
中的react-virtualized
重新实现它。
代码示例
问题
如上面的沙箱所示,它正在[[种类工作。 不起作用的作用是键盘导航。您可以使用键盘进行导航,但是当您在可见元素之外导航时,Listbox
不会滚动到突出显示的值。
我尝试过的事情:
onKeyDown
组件覆盖Autocomplete
。但是,这完全覆盖了keydown功能,需要我重新实现它。onKeyUp
保留onKeyDown
功能并找到具有data-focus
属性的元素,然后在scrollToIndex
组件上使用List
。在某些情况下,此方法有效,但如果用户按住键一段时间,并最终到达过扫描渲染项目之外的索引,则会中断。react-virtualized
虚拟化Material-UI自动选择组件中的选项吗?我应该使用List
以外的其他东西吗?[我的最后选择是使用useAutocomplete
钩子并重新实现渲染逻辑,但是由于我只是在虚拟化之后才想避免这种情况。
要使滚动功能正常工作,您需要确保滚动元素具有“列表框”的角色。
这是演示工作版本的代码的更新示例:https://codesandbox.io/s/adoring-saha-n9cr1
唯一改变的是从ListboxComponent道具中提取role
属性,并将其分配给List
组件。