(React.js) 使用箭頭鍵滾動列表

Question

我正在開發一個自動完成組件，但我無法使用箭頭鍵（向下/向上）滾動，鼠標可以正常工作。

圖片

我對此進行了大量研究，並嘗試使用 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>
);

完整代碼在這里： codeandbox

誰能幫我解決這個問題？

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