react-virtualized ArrowKeyStepper List上下箭头选中失效问题

问题分析 #

你的代码中ArrowKeyStepper已绑定正确回调，但按下上下箭头无反应，核心原因是ArrowKeyStepper需要关联的容器或列表元素获得焦点，才能监听键盘事件——默认情况下List组件不会自动获取焦点，行元素也没有可聚焦属性，导致键盘事件无法被捕获。

修复方案 #

1. 给外层容器添加可聚焦属性 #

在包裹ArrowKeyStepper的div上设置tabIndex="0"，让容器具备焦点捕获能力，同时可移除默认焦点边框（可选）：

<div 
  className={classes.listContainer} 
  tabIndex="0" 
  style={{ outline: 'none' }}
>
  <ArrowKeyStepper
    mode="cells"
    columnCount={1}
    scrollToColumn={0}
    rowCount={users.length}
    onScrollToChange={({ scrollToRow }) => this.selectRow(scrollToRow)}
  >
    {/* 内部组件保持原有结构 */}
  </ArrowKeyStepper>
</div>

2. 让行元素支持聚焦 #

在renderRow方法中，给每个行元素添加tabIndex="0"，同时关联选中状态：

renderRow = ({ index, key, style }) => {
  const user = this.props.users[index];
  const isSelected = this.state.selectedRowIndex === index;
  return (
    <div
      key={key}
      style={style}
      tabIndex="0"
      className={`${classes.row} ${isSelected ? classes.selected : ''}`}
      onClick={() => this.selectRow(index)}
      // 可选：按下回车触发选中
      onKeyPress={(e) => e.key === 'Enter' && this.selectRow(index)}
    >
      {user.name}
    </div>
  );
};

3. 初始化时自动获取焦点 #

组件挂载后主动让容器获取焦点，确保页面加载后即可用键盘操作：

componentDidMount() {
  this.listContainer.focus();
}

// 给外层容器添加ref
<div 
  className={classes.listContainer} 
  tabIndex="0" 
  style={{ outline: 'none' }}
  ref={el => this.listContainer = el}
>
  {/* ... */}
</div>

关键原理 #

ArrowKeyStepper的键盘事件监听依赖焦点处于其包裹的可聚焦元素范围内，只有焦点在此区域时，上下箭头事件才会被捕获，进而触发onScrollToChange回调更新选中状态和滚动位置。

内容的提问来源于stack exchange，提问作者Ирина Папахина