反应虚拟箭头键步进表

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>

我试图找到答案，但是没有用。

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>
 );