无法在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。

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

由于这里什么也没有发生，因此无法选择任何下拉菜单项。

Answer 1

这应该使您朝正确的方向前进：)

首先，使用onKeydown方法代替onKeypress。其次，为简便起见，可能值得使用switch语句，除非您需要复杂的条件。

为您的处理程序尝试此操作

  handleKeyPress = e => {
    switch (e.keyCode) {
      case 13: // enter
        this.proceedAutoComplete(this.getFiltered(e.target.value));
        break;
      case 40: // down arrow
        alert("Down arrow detected!");
        //TODO - change focus
        break;
      default:
        break;
    }
  };

并将onKeyPress={this.handleKeyPress}更改为onKeyDown={this.handleKeyPress}

这将使您开始正确的密钥检测。您必须对逻辑进行一些修改才能更改课程选择。希望这可以帮助您入门！

Keycode Cheatsheet这里有一个有关键码的有用指南>

并且您应该知道，反应会触发一种称为“综合事件”的事件，这与您可能习惯的其他事件有些不同。您可以在此处阅读有关这些内容的信息：React Synthetic Events