使用 React 从下拉列表中选择一个值

Question

我正在 react 应用程序中创建一个非常简单的自动完成部分。

代码如下，

index.js

import React from 'react';
import { render } from 'react-dom';
import Autocomplete from './Autocomplete';

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'left',
};

const items = ['Moscow', 'Ufa', 'Tver', 'Alma ata'];

function onAutoCompleteHandle(val) {
  alert(val);
}

const App = () => (
  <div style={styles}>
    <Autocomplete items={items} onAutocomplete={onAutoCompleteHandle.bind(this)}/>
  </div>
);

render(<App />, document.getElementById('root'));

autocomplete.js

渲染方法：

const showSuggest = {
      display: this.state.show ? 'block' : 'none',
    }
    return (
      <div>
      <input type="text" 
        className="autoCompleteInput"
        onChange={this.handleChange}
        ref={input => { this.textInput = input; }} 
        onClick={this.handleClick}
        onKeyPress={this.handleKeyPress}
      />
      <span className='suggestWrapper' style={showSuggest}>
          <ul className='suggestAutocomplete'>
          {this.state.items.map((item, i) => {
            return 
            <li key={i} onClick={this.selectSuggestion}>
              {item}
            </li>
          })}
        </ul>
      </span>
      </div>
    )

完整的工作示例： https://codesandbox.io/s/react-autocomplete-nbo3n

在上面给出的沙盒示例中重现的步骤：

->点击输入框。

-> 输入单个字母，例如..、a。

-> 这给出了两个项目作为结果Ufa, Alma ata。

->按键盘上的向下箭头键。

由于这里没有任何反应，无法选择任何下拉项目。

到目前为止，只有当我们将鼠标移到下拉菜单上并选择任何项目时，事情才会起作用，但我需要为按键和输入实现相同的行为。

预期行为：

->在keydown/keyup上应该可以导航下拉列表项。

->在一个项目上点击回车键，那么该项目应该是选定的。

我已尝试将 ref={input => { this.textInput = input; }} 分配给 ul 列表项 suggestAutocomplete 但这也无济于事..

真的，我被这个困扰了很长时间。恳请您考虑一下这个问题。

如果您更改此现有代码也可以，但我需要在自动完成中同时具有鼠标选择和键盘选择。..

Answer 1

1. 初始化一个值为-1的状态

2. 在 keyDown 上添加事件

类似这样的：

handleKeyDown(e) {
  if (e.keyCode == 40) { //down
    this.setState({active: ++this.state.active})
  } else if (e.keyCode == 38) { //up
    this.setState({active: --this.state.active})
  } else if (e.keyCode == 13) { //enter
    e.preventDefault();
    if (this.state.active > -1) {
      this.selectSuggestion();
    }
  }
};

1. 点击时，再次将状态重置为 -1。

检查这个：https://codesandbox.io/s/react-autocomplete-cf2yd