(Реакция. js) Прокрутка списка с помощью клавиш со стрелками - PullRequest
Новая
       48

(Реакция. js) Прокрутка списка с помощью клавиш со стрелками

2 голосов
/ 06 февраля 2020

Я разрабатываю компонент автозаполнения, но не могу прокрутить с помощью клавиш со стрелками (вниз / вверх), с помощью мыши он работает нормально.

image

Я много об этом изучал и пытался решить эту проблему с помощью ссылок, но это не сработало. 

const refs = filteredSuggestions.reduce((acc, value) => {
  acc[value.id] = React.createRef();
  return acc;
}, {});

Место, на которое есть ссылки 

suggestionsListComponent = (
   <ul class="suggestions">
        {filteredSuggestions.map((suggestion, index) => {
          let className;
          if (index === activeSuggestion) {
            className = "suggestion-active";
          }
          return (
            <li ref={refs[suggestion.id]} className={className} key={suggestion} onClick={onClick}>
              {suggestion}
            </li>
          );
        })}
   </ul>
);

Полный код здесь: codesandbox

Может кто-нибудь помочь мне решить эту проблему?

1 Ответ

1 голос
/ 06 февраля 2020

Легко интегрируйте ваш реагирующий компонент с клавишами со стрелками на клавиатуре, используя ту же конфигурацию, что и в swipe-реагируют и wheel-реагируют .

Использование

  1. Установите пакет npm: 

    npm install --save arrow-keys-react

  2. Импортируйте его: 

    import ArrowKeysReact from 'arrow-keys-react';

  3. Конфигурировать события клавиш со стрелками («влево», «вправо», «вверх», «вниз»), хотя бы одно из них, в конструкторе компонентов или в функции рендеринга: 

    ArrowKeysReact.config({
  left: () => {
   console.log('left key detected.');
 },
 right: () => {
   console.log('right key detected.');
 },
 up: () => {
   console.log('up key detected.');
 },
 down: () => {
   console.log('down key detected.');
 }
});

4. Интегрировать с компонентом React: 

<YourComponent {...ArrowKeysReact.events} />

Пример 

import React, { Component } from 'react';
import ArrowKeysReact from 'arrow-keys-react';

class App extends Component {
 constructor(props){
  super(props);
  this.state = {
   content: 'Use arrow keys on your keyboard!'
 };
 ArrowKeysReact.config({
  left: () => {
    this.setState({
      content: 'left key detected.'
    });
  },
  right: () => {
    this.setState({
      content: 'right key detected.'
    });
  },
  up: () => {
    this.setState({
      content: 'up key detected.'
    });
  },
  down: () => {
    this.setState({
      content: 'down key detected.'
    });
  }
 });
}
render() {
return (
  <div {...ArrowKeysReact.events} tabIndex="1">
    {this.state.content}
  </div>
  );
  }
 }

export default App;

Замечания

  • Когда вы используете div, добавьте свойство tabIndex.
  • Элемент должен быть в фокусе, чтобы обнаружить клавиши со стрелками. Клавиши со стрелками будут обнаружены, когда пользователь нажмет на элемент или сфокусирует его, используя клавишу табуляции на клавиатуре. Кроме того, вы можете запрограммировать свой компонент на focus() при загрузке.
  • ArrowKeysReact.config можно поместить в функцию render вместо функции constructor.
...