Выберите значение из раскрывающегося списка с помощью React

Question

Я создаю очень простой раздел автозаполнения в приложении реакции.

Код следующим образом:

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'));

автозаполнение. 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.

-> Нажмите клавишу со стрелкой вниз на клавиатуре.

Поскольку здесь ничего не происходит, невозможно выбрать ни один из раскрывающихся элементов.

На данный момент все работает, только если мы наведите указатель мыши на раскрывающийся список и выберите любой элемент, но мне нужно реализовать такое же поведение для нажатия клавиши и ввода.

Ожидаемое поведение:

-> При нажатии / нажатии должна иметься возможность перемещаться элементы раскрывающегося списка.

-> При нажатии клавиши ввода на элементе этот элемент должен быть выбран.

Я попытался назначить ref={input => { this.textInput = input; }} элементу ul list items 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.

Проверьте это: https://codesandbox.io/s/react-autocomplete-cf2yd