javascript - 反应虚拟化的箭头键步进表

Question

我的问题出在 ArrowKeyStepper 中。它不适合我。我尝试按下键盘按钮，但没有任何效果。链接到此处的文档react-virtualized

          <ArrowKeyStepper
            columnCount={1}
            rowCount={data.length}
            mode="cells"
          >
            {({ onSectionRendered, scrollToRow }) => {
              return (
                <Table
                  onRowsRendered={({ startIndex, stopIndex }) => {
                    onSectionRendered({
                      rowStartIndex: startIndex,
                      rowStopIndex: stopIndex
                    });
                  }}
                  scrollToRow={scrollToRow}
                  rowCount={data.length}
                  rowGetter={({ index }) => data[index]}
                >
                  // Column here
                </Table>
              );
            }}
          </ArrowKeyStepper>

我试图找到答案，但没有奏效。

标签： javascriptreactjsreact-virtualized

Answer 1

使用 Table，您可以尝试使用 scrollToIndex，然后传递表项的索引，而不是使用 ArrowKeyStepper。

const {index} = this.props
  return (
    <Table
      onRowsRendered={({ startIndex, stopIndex }) => {
        onSectionRendered({
          rowStartIndex: startIndex,
          rowStopIndex: stopIndex
        });
      }}
      scrollToRow={scrollToRow}
      rowCount={data.length}
      rowGetter={({ index }) => data[index]}
      scrollToIndex={index}
    >
      // Column here
    </Table>
 );