Question

我正在遍历React中的元素列表，并在网格中显示它们。我希望能够使用键盘浏览网格。

此函数呈现网格：

listOfEmployees() {
    const results = [];
    while (this.state.filteredView.length) {
      results.push(this.state.filteredView.splice(0, 3))
    }
    return results.map(result =>
      <Row
        style={{display: 'contents'}}
        onKeyDown={this.handleKeyPress}
        tabIndex="0"
      >
        {result.map(e =>
          <Col sm={4}>
            <Link
              to={`/employee/${e.id}`}
              style={{textDecoration: 'none', color: 'black'}}
              className="Link"
            >
              <Wrapper>
                <Name>
                  {e.name}
                </Name>
                <JobTitle>
                  {e.job_titles}
                </JobTitle>
              </Wrapper>
            </Link>
          </Col>
        )}
      </Row>
    )
  }

这是我的handleKeyPress事件处理程序：

handleKeyPress = (e) => {
    const links = document.getElementsByClassName('Link')
    let active = document.activeElement.tabIndex
    if (e.keyCode === 39) {
      links[1].focus()
      // links[active + 1].focus() *This does not work*
    }
  }

这可行，但是经过硬编码，所以我只关注第二个div（links[1]）。如何使其动态化，以便每按一次右箭头键即可将焦点移至一个格上？

Answer 1

弄清楚了。我在<Link />上添加了一个id，然后使用该值获取下一个元素。

<Link
  to={`/employee/${e.id}`}
  style={{textDecoration: 'none', color: 'black'}}
  className="Link"
  id={e.id}
>

然后

handleKeyPress = (e) => {
    const link = document.getElementsByClassName('Link')
    if (e.keyCode === 39) {
      const targetId = parseInt(e.target.id) - 1
      link[targetId + 1].focus()
    } else if (e.keyCode === 37) {
      const targetId = parseInt(e.target.id) - 1
      link[targetId - 1].focus()
    }
  }

希望这对其他人也有帮助。

使用onKeyDown聚焦下一个元素

1 个答案: