Прокрутка с помощью клавиш со стрелками вверх / вниз на клавиатуре в React? - PullRequest
Новая
       33

Прокрутка с помощью клавиш со стрелками вверх / вниз на клавиатуре в React?

0 голосов
/ 26 декабря 2018

У меня есть пользовательский список 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 голосов
/ 26 декабря 2018

Это можно сделать, используя ref в ReactJS, а затем добавив прослушиватель событий для события keydown и затем переместив фокус на следующий или предыдущий брат.

Примечания

  • Я добавляю атрибут tabindex к каждому элементу div, чтобы позволить им сфокусироваться на
  • Я использую ref на элементе обтекания для прослушивания keydown
  • Iпроверьте keycode вверх / вниз, чтобы перейти к следующему / предыдущему брату
  • Я считаю, что keycode для вверх / вниз на полноразмерной клавиатуре отличается, но у меня нет одного, чтобы проверить.

Solution

Чтобы протестировать демо, нажмите на любой div и затем используйте стрелки вверх / вниз

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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Документация

https://reactjs.org/docs/refs-and-the-dom.html

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

...