将react-virtualized切换到第一个元素时滚动到底部

Question

我正在使用react-virtualized库。而且我需要能够在列表中浏览。

由于并非所有项目都已呈现，所以我无法跳至最后一行

当虚拟列表滚动到列表的底部时，如果我想跳至第一行，也会发生类似的问题

如果我能够始终渲染第一行和最后行，无论滚动位置如何，我都可以选择最后和第一< / strong>元素。

用例：

想象一下，当前焦点位于虚拟列表上方的输入框，并想象虚拟列表滚动到底部。

如果我按键盘选项卡，则希望焦点集中在第一个元素上。但是因为没有渲染第一个元素，所以焦点将放在虚拟列表的第一个渲染行上。我希望这是有道理的。

这是我当前的代码：

class Locations extends React.Component {

  setListElementRef = (ref) => {
    this.listRef = ref;
  }

  rowRenderer = ({ index, style }) => {
    return (
      <div style={style} key={index} >
        <CheckBoxContainer />
      </div>
    );
  }

  render() {
    const {
      filteredLocations, onSearchValueChange,
    } = this.props;

    return (
          <List
            tabIndex={-1}
            isScrollingOptOut
            ref={this.setListElementRef}
            rowRenderer={this.rowRenderer}
            rowCount={filteredLocations.length}
            rowHeight={32}
            height={300}
            width={218}
            overscanRowCount={5}
          />
    );
  }
}