（React.js）使用箭头键在列表中滚动

Question

我正在开发一个自动完成组件，但是不能用箭头键（下/上）滚动，而鼠标则可以正常工作。

image

我对此进行了很多研究，并尝试使用refs解决此问题，但是没有用。

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

有人可以帮我解决这个问题吗？

Answer 1

使用与swipe-react和wheel-react程序包相同的配置，轻松地将react组件与键盘箭头键集成在一起。

用法

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属性。
• 该元素必须位于焦点上才能检测箭头键。当用户单击元素或使用键盘上的Tab键将其聚焦时，将检测到箭头键。或者，您可以在加载组件时将其编程为focus()。
• [ArrowKeysReact.config可以放在render功能中，而不是constructor功能中。