在React中使用键盘的上/下箭头键滚动吗?

时间:2018-12-26 11:21:48

标签: javascript reactjs keyboard-events

我有一个自定义列表框,一个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)

Enter image description here

1 个答案:

答案 0 :(得分:1)

这可以通过在ReactJS中使用ref然后为keydown事件添加事件侦听器,然后将焦点移到下一个或上一个同级对象来完成。

注释

  • 我在每个div上添加了tabindex属性,以使他们能够专注于
  • 我在包装元素上使用了ref来监听keydown
  • 我检查keycode上/下移动到下一个/上一个同级
  • 我相信全尺寸键盘上{/ {1}}的上/下键是不同的,但是我没有一个要测试。

解决方案

要测试演示,请单击任意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