javascript - (React.js) 使用箭头键滚动列表

问题描述

我正在开发一个自动完成组件，但我无法使用箭头键（向下/向上）滚动，使用鼠标它可以正常工作。

我对此进行了很多研究，并试图用 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

谁能帮我解决这个问题？

标签： javascriptreactjsscrollautocompletearrow-keys

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

用法

安装 npm 包：
```
npm install --save arrow-keys-react
```

导入它：

import ArrowKeysReact from 'arrow-keys-react';

在组件构造函数或渲染函数中配置箭头键事件（'left'、'right'、'up'、'down'），至少其中一个：

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函数中。

javascript - (React.js) 使用箭头键滚动列表

问题描述

解决方案

推荐阅读