使用onKeyDown聚焦下一个元素

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](。如何使其动态，以便每次按下右箭头键都将焦点移动到一个div上？

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()
}
}

希望这也能帮助到其他人。