我有一个自定义列表框,一个div
,其中包含其他div
个子级的垂直列表。我想添加向上/向下箭头键导航,以更改当前选中的孩子。
因此,当我单击第一项并按down arrow key
时,它应允许我选择第二项(以下项)。而且,如果我点击up arrow key
,它应该选择回第一项(上一项)。
const renderInboxSummary = targetDetailsData.map((todo, index) => {
const hasNewMessageInd = todo.hasNewMessageInd;
return (
<div onClick={() => this.handleClick(targetDetailsData, todo.aprReference, index)}>
<div>
{todo.aprRecordUserName}
</div>
<div>
{todo.aprBranchCode}
</div>
<div>
{todo.aprScreeName}
</div>
</div>
);
});
每个div
都有一个点击事件处理程序this.handleClick(targetDetailsData, todo.aprReference, index)
。
答案 0 :(得分:1)
这可以通过在ReactJS中使用ref
然后为keydown
事件添加事件侦听器,然后将焦点移到下一个或上一个同级对象来完成。
tabindex
属性,以使他们能够专注于ref
来监听keydown
keycode
上/下移动到下一个/上一个同级要测试演示,请单击任意div,然后使用向上/向下箭头
keycode
const { Component } = React;
class App extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
this.moveFocus();
}
moveFocus() {
const node = this.myRef.current;
node.addEventListener('keydown', function(e) {
const active = document.activeElement;
if(e.keyCode === 40 && active.nextSibling) {
active.nextSibling.focus();
}
if(e.keyCode === 38 && active.previousSibling) {
active.previousSibling.focus();
}
});
}
render() {
return (
<div ref={this.myRef}>
<div tabindex="0">First</div>
<div tabindex="1">Second</div>
<div tabindex="2">Third</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
div:focus {
color: red;
}
https://reactjs.org/docs/refs-and-the-dom.html
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex