ReactJS 常青自动完成组件

ReactJS 是一款非常流行的前端 JavaScript 库，而自动完成组件则是一个常见的前端 UI 组件。本文将介绍如何利用 ReactJS 来创建一个常青自动完成组件，并且会提供代码示例。

什么是常青自动完成组件？

常青自动完成组件是一个可以自动匹配输入内容并且弹出选项列表的 UI 组件。用户可以通过键盘或者鼠标选择列表中的选项，从而完成输入内容的补全。这种组件在许多场景下都非常有用，比如搜索框、表单输入框等。

利用 ReactJS 创建常青自动完成组件

下面我们就来介绍如何利用 ReactJS 创建一个常青自动完成组件。

创建 Autocomplete 组件

首先，我们需要创建一个 React 组件来实现自动完成功能。这个组件需要包含以下几个元素：

• input 标签：用来输入内容。
• ul 标签：用来显示选项列表。
• li 标签：用来表示每一个选项。
• 状态对象：用来存储组件的状态。

在组件的 constructor 方法中，我们可以初始化状态对象。具体来说，我们需要记录以下信息：

• options：表示可选项列表。
• filteredOptions：表示过滤后的可选项列表。
• selectedOption：表示当前选中的选项。
• showOptions：表示是否弹出选项列表。

import React, { Component } from 'react';

class Autocomplete extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: ['apple', 'banana', 'cherry', 'date', 'elderberry'],
      filteredOptions: [],
      selectedOption: '',
      showOptions: false
    };
  }

  componentDidMount() {}

  render() {
    return (
      <div className="autocomplete">
        <input type="text" />
        {this.state.showOptions && (
          <ul className="autocomplete-options">
            {this.state.filteredOptions.map((option, index) => (
              <li key={index}>{option}</li>
            ))}
          </ul>
        )}
      </div>
    );
  }
}

export default Autocomplete;

处理输入变化事件

接下来，我们需要处理输入内容变化的事件。具体来说，我们可以为 input 标签添加一个 onChange 事件监听器，并且在监听器中更新状态对象的值。我们还需要在状态对象的改变后重新计算过滤后的选项列表，并且根据列表是否为空来控制选项列表的显示。

handleChange = (event) => {
  const { value } = event.target;
  let filteredOptions = [];
  if (value) {
    const regex = new RegExp(`^${value}`, 'i');
    filteredOptions = this.state.options.filter(option => regex.test(option));
  }
  this.setState({ filteredOptions, selectedOption: value, showOptions: true });
};

render() {
  return (
    <div className="autocomplete">
      <input type="text" value={this.state.selectedOption} onChange={this.handleChange} />
      {this.state.showOptions && (
        <ul className="autocomplete-options">
          {this.state.filteredOptions.map((option, index) => (
            <li key={index} onClick={() => this.selectOption(option)}>
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

在上面的代码中，handleChange 方法会根据当前输入值 value 来计算过滤后的选项列表。我们使用了 RegExp 来实现模糊匹配，从而找出以输入值开头的选项。然后我们更新状态对象中的 filteredOptions、selectedOption 和 showOptions 三个属性。最后，在选项列表中使用 onClick 方法来处理点击事件。

处理键盘事件

接下来，我们需要处理键盘事件。具体来说，我们可以为 input 标签添加一个 onKeyDown 事件监听器，并且在监听器中处理上下箭头、回车和 Esc 键的事件。在选项列表中使用 onMouseOver 方法来处理鼠标悬停事件。

handleKeyDown = (event) => {
  const { keyCode } = event;
  const { filteredOptions, selectedOption } = this.state;
  if (filteredOptions.length) {
    if (keyCode === 38) { // up arrow
      const index = filteredOptions.indexOf(selectedOption);
      const newIndex = index > 0 ? index - 1 : filteredOptions.length - 1;
      this.setState({ selectedOption: filteredOptions[newIndex] });
    } else if () { // down arrow
      // similar to up arrow handling
    } else if () { // enter
      this.selectOption(selectedOption);
    } else if () { // esc
      this.setState({ showOptions: false });
    }
  }
};

handleMouseOver = (event) => {
  const { target } = event;
  this.setState({ selectedOption: target.innerText });
};

render() {
  return (
    <div className="autocomplete">
      <input type="text" value={this.state.selectedOption} onChange={this.handleChange} onKeyDown={this.handleKeyDown} />
      {this.state.showOptions && (
        <ul className="autocomplete-options">
          {this.state.filteredOptions.map((option, index) => (
            <li key={index} onClick={() => this.selectOption(option)} onMouseOver={this.handleMouseOver}>
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

在上面的代码中，handleKeyDown 方法会根据按键代码 keyCode 处理上下箭头、回车和 Esc 键的事件，并且更新选项列表中选中的选项。我们需要注意的是，在处理上下箭头时，需要判断当前选中的选项是否是选项列表中的第一个或者最后一个。在处理回车键时，我们直接调用 selectOption 方法来选中当前选项。

处理选择事件

最后，我们需要处理选择事件。具体来说，我们可以定义一个 selectOption 方法来更新输入框的值和状态对象的值，并且隐藏选项列表。

selectOption = (option) => {
  this.setState({ selectedOption: option, showOptions: false });
};

render() {
  return (
    <div className="autocomplete">
      <input type="text" value={this.state.selectedOption} onChange={this.handleChange} onKeyDown={this.handleKeyDown} />
      {this.state.showOptions && (
        <ul className="autocomplete-options">
          {this.state.filteredOptions.map((option, index) => (
            <li key={index} onClick={() => this.selectOption(option)} onMouseOver={this.handleMouseOver}>
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

在上面的代码中，我们直接调用 setState 方法来更新输入框的值和状态对象的值，并且将 showOptions 属性设为 false，从而隐藏选项列表。

总结

在本文中，我们介绍了如何利用 ReactJS 创建一个常青自动完成组件。我们通过实现输入变化、键盘事件和选择事件三个方法来实现自动补全和选项选择功能。这个组件可以用于搜索框、表单输入框等场景。完整的代码可以在本文的示例代码中找到。