如何键盘导航 ListGroup 和 ListGroupItem

编程问答 2022-05-27

问题描述

我正在尝试以合乎逻辑的方式键盘导航 ListGroup / ListGroup 项目。 我的应用设置为：

  • 分区
  • 列表组
  • ListGroupItem

我在所有项目上都有 tabIndex=0。 （我使用的框架将层次结构中的其他组件设置为索引 = 0，我无法更改它们。因此，为了保持流程，所有内容都设置为 0）。

键盘导航效果很好，我可以选择每个组件。但是，我希望能够进入 ListGroup，并在项目中移动并能够返回到父组件，几乎就像一个跳过导航的想法。对于大型列表，您需要在所有项目中使用 Tab 键或 Shift-Tab 键才能返回到应用的其他部分。

如何通过键盘更好地导航项目？ 我发现 this post 显示了一种使用 jQuery 在 li 项目上向上/向下箭头的方法，但我正在寻找一种方法来对 reactstrap 列表执行此操作。

Example Codepen

ListGroup / ListGroupItem 代码片段

 <ListGroup className="listgroup" key={this.state.selectedFac} tabIndex={0} >  
          { this.state.allRecords.map((feat,i) =>{
              return (                 
                <ListGroupItem key={feat.objectid} action 
                  onClick={() => this.selectedSite(feat.objectid)}
                  href={`${feat.objectid}`}
                  active={this.state.selectedFac == feat.objectid ? true : false}
                  tabIndex={0}>
                     {feat.objectid}
                </ListGroupItem>               
              )
            })
          }
        </ListGroup>

解决方法

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

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

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

accessibilityaccessibilityjavascriptkeyboard-navigationreactjsreactjsreactjsreactjsreactstrap