从头开始建立一个React自动完成组件自动完成是一项功能，它建议完成用户最初输入的单词或短语。在这篇文章中，我们将在Re

自动完成是一项功能，它建议完成用户最初输入的单词或短语。在这篇文章中，我们将在React中从头开始构建一个自动完成组件。

为了更好地理解本教程，你应该熟悉JavaScript和React，而且你的机器上应该安装有Node.js和npm。

你可以在CodeSandbox上看到本教程的完整代码和一个实时版本。让我们开始吧!

开始吧

让我们从使用npx 创建一个新的React项目开始。在我们的例子中，我们将使用autocomplete-app 作为项目名称。

npx create-react-app autocomplete-app

现在，让我们导航到项目目录并启动开发服务器。下面的命令打开了一个浏览器标签，渲染默认的模板应用程序。

cd autocomplete-app && yarn start

建立一个React自动完成组件

在你的src 文件夹内，创建一个新文件，名为Autocomplete.js 。我们将创建一个功能组件，接收一个名为suggestions 的道具。该功能组件将返回一个button 标签，并对其属性进行解构。

import { useState } from "react";

const AutoComplete = ({ suggestions }) => {
   return (
    <>
      <input
        type="text"
      />
    </>
  );
};
export default AutoComplete;

上面的代码创建了一个自动完成组件。在里面，我们渲染了一个输入组件，它接收一个text 的输入类型。让我们创建一些方法来应用在我们的组件中。

定义方法

让我们在我们的自动完成组件中定义一个onChange 方法。首先，我们需要定义过滤建议的状态，显示活动建议，并接受用户的输入。

 const [filteredSuggestions, setFilteredSuggestions] = useState([]);
  const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(0);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [input, setInput] = useState("");

现在，让我们来创建onChange 方法。

const onChange = (e) => {
    const userInput = e.target.value;

    // Filter our suggestions that don't contain the user's input
    const unLinked = suggestions.filter(
      (suggestion) =>
        suggestion.toLowerCase().indexOf(userInput.toLowerCase()) > -1
    );

    setInput(e.target.value);
    setFilteredSuggestions(unLinked);
    setActiveSuggestionIndex(0);
    setShowSuggestions(true);
  };

每当用户改变输入值时，onChange 方法就会启动，过滤建议列表并返回那些不包含用户输入的建议。

我们使用React的setState Hook来设置用户的属性，使其包含一个值。我们还用setShowSuggestions 状态来设置建议，向用户显示我们的列表。每次输入发生变化，setActiveSuggestions ，向用户显示一个新的建议列表。

添加一个建议

让我们在我们的Autocomplete.js 文件中添加一个onClick 事件，用于添加一个建议。

 const onClick = (e) => {
    setFilteredSuggestions([]);
    setInput(e.target.innerText);
    setActiveSuggestionIndex(0);
    setShowSuggestions(false);
  };

在上面的代码块中，我们创建了一个onClick 事件，当用户点击一个建议时，该事件将被发射出来。我们使用React的setState Hook来更新用户的输入并重置我们当前的状态。

在自动完成的建议之间进行选择

要添加到我们的应用程序的一个重要功能是onKeyDown 方法。当用户得到两个或更多建议时，用户可以使用keyDown 按钮来选择任何一个自动完成的建议。

第一个条件是检查用户的输入是否与keyCode 13 ，即回车键匹配。如果是，它就运行setInput 方法来添加用户的输入并关闭建议列表。

如果用户按下向上的方向键，即keyCode 38 ，第二个条件将递减索引。如果索引是0 ，第二个条件将在activeSuggestion 道具中返回任何东西。

如果用户输入keyCode 40 ，该条件将增加setActiveSuggestion 道具中的索引。如果索引与filteredSuggestions 的长度相匹配，它将不返回任何东西。

创建一个`SuggestionsListComponent`

对于我们的最后一个方法，让我们创建一个SuggestionsListComponent ，它将用类来标记活动建议，这样我们就可以在我们的应用程序中使用它们。我们还将添加一个警报，当用户输入的单词不在我们的SuggestionsList 。

const SuggestionsListComponent = () => {
    return filteredSuggestions.length ? (
      <ul class="suggestions">
        {filteredSuggestions.map((suggestion, index) => {
          let className;
          // Flag the active suggestion with a class
          if (index === activeSuggestionIndex) {
            className = "suggestion-active";
          }
          return (
            <li className={className} key={suggestion} onClick={onClick}>
              {suggestion}
            </li>
          );
        })}
      </ul>
    ) : (
      <div class="no-suggestions">
        <em>No suggestions, you're on your own!</em>
      </div>
    );
  };

SuggestionsListComponent 方法检查用户输入的道具是否有任何价值。如果这些值存在，SuggestionsListComponent 方法就会分配一个值，在filteredSuggestions 属性中循环。

如果索引与activeSuggestion 属性中的值相匹配，它就将一个active 类添加到一个活动建议中。当使用onClick 方法时，suggestionListComponent 方法将返回一个有序的建议列表，并为一个建议分配一个类名。

如果showSuggestions 和userInput 中的值在我们的数据库中不存在，用户会收到一个文本，说没有建议。

输入用户文本

让我们通过创建一个输入字段来完成我们的自动完成组件，如果suggestionsListComponent 中列出的条件没有得到满足，用户可以输入文本。

return (
    <>
      <input
        type="text"
        onChange={onChange}
        onKeyDown={onKeyDown}
        value={input}
      />
      {showSuggestions && input && <SuggestionsListComponent />}
    </>
  );
};
export default AutoComplete;

最后，让我们导航到我们项目目录内的App.js 文件，并添加下面的代码片段。我们将创建一个应用程序组件，它接收我们的自动完成组件和一个数组中的建议列表。

import React from "react";
import Autocomplete from "./Autocomplete";
import "./styles.css";

const App = () => {
  return (
    <div>
      <h1>React Autocomplete Demo</h1>
      <h2>Start typing and experience React autocomplete!</h2>
      <Autocomplete
        suggestions={[
          "Alligator",
          "Bask",
          "Crocodilian",
          "Death Roll",
          "Eggs",
          "Jaws",
          "Reptile",
          "Solitary",
          "Tail",
          "Wetlands"
        ]}
      />
    </div>
  );
};

export default App;

现在，让我们为我们的应用程序设计样式吧将下面的样式添加到你的styles.css 文件中。

body {
  font-family: sans-serif;
}
input {
  border: 1px solid #999;
  padding: 0.5rem;
  width: 300px;
}
.no-suggestions {
  color: #999;
  padding: 0.5rem;
}
.suggestions {
  border: 1px solid #999;
  border-top-width: 0;
  list-style: none;
  margin-top: 0;
  max-height: 143px;
  overflow-y: auto;
  padding-left: 0;
  width: calc(300px + 1rem);
}
.suggestions li {
  padding: 0.5rem;
}
.suggestion-active,
.suggestions li:hover {
  background-color: #008f68;
  color: #fae042;
  cursor: pointer;
  font-weight: 700;
}
.suggestions li:not(:last-of-type) {
  border-bottom: 1px solid #999;
}

我们的应用程序将看起来像下面的图片。

React Autocomplete Demo

结语

在本教程中，我们涵盖了设置一个React项目，构建一个自动完成组件，以及为我们的应用程序设计样式。

自动完成功能不仅可以为你的用户节省时间，它还可以引导用户进行更相关的搜索。现在，你知道如何在你的React应用程序中从头开始构建一个自动完成组件了吧!

The postBuild a React autocomplete component from scratchappeared first onLogRocket Blog.

从头开始建立一个React自动完成组件

开始吧