Select 使用 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 。

->按鍵盤上的向下箭頭鍵。

由於此處沒有任何反應，因此無法 select 任何下拉項目。

到目前為止，只有當我們將鼠標移到下拉列表和 select 任何項目上時，事情才會起作用，但我需要為按鍵和輸入實現相同的行為。

預期行為：

->在 keydown/keyup 上應該能夠導航下拉列表項。

->在一個項目上單擊輸入鍵，那么該項目應該是選定的。

我試過分配ref={input => { this.textInput = input; }} ref={input => { this.textInput = input; }}到 ul 列表項suggestAutocomplete ，但這也無濟於事..

真的，我被這個困擾了很長時間。 我謙虛地請求你考慮這個問題。

如果您更改此現有代碼也可以，但我需要在自動完成中同時進行鼠標選擇和鍵盤選擇。

Answer 1

1. 用值 -1 初始化 state

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();
    }
  }
};

3. 單擊時，將 state 再次重置為 -1。

檢查這個： https://codesandbox.io/s/react-autocomplete-cf2yd