带有 ArrowKeyStepper 的 react-virtulized 列表不起作用

问题描述

我试图让我的反应虚拟化 List 组件与 ArrowKeyStepper 一起工作，但没有成功。我一定遗漏了一些东西，但找不到此实现的任何示例。没有错误，只是没有按预期运行。

到目前为止我的代码是这样的：

import { List as VirtualizedList,AutoSizer,ArrowKeyStepper } from "react-virtualized";
...skip a lot of other stuff
<div data-testid="popover-items">
          <ArrowKeyStepper columnCount={1} rowCount={numFilteredOptions} mode="cells">
            {({ onSectionRendered,scrollToRow,scrollToColumn }) => (
              <AutoSizer disableHeight={!fullScreen}>
                {({ width,height }) => (
                  <VirtualizedList
                    rowHeight={rowHeight}
                    height={fullScreen ? height - 175 : VIRTUAL_LIST_HEIGHT}
                    onRowsRendered={onSectionRendered}
                    columnCount={1}
                    rowCount={numFilteredOptions}
                    roWrenderer={renderRow}
                    norowsRenderer={() => null}
                    scrollToRow={scrollToRow}
                    scrollToColumn={scrollToColumn}
                    width={width}
                  />
                )}
              </AutoSizer>
            )}
          </ArrowKeyStepper>
        </div>

预期行为：向上/向下箭头会移动列表中项目的选择。

实际行为：没有任何反应。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）