时间戳

首页 > 解决方案 > 使用 React 从下拉列表中选择一个值

javascript - 使用 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'));

自动完成.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，但这也无济于事..

真的，我被这个困扰了很长时间。我谦虚地请求你考虑这个问题。

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

标签： javascripthtmlcssreactjsautocomplete

解决方案

  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

推荐阅读