介绍
自动完成是一项功能，其中输入字段根据用户输入建议单词。这有助于改善应用程序中的用户体验，例如需要进行搜索的情况。
在本文中，您将研究如何在 React 中构建自动完成组件。您将使用固定的建议列表、事件绑定、理解键盘代码和操作状态管理。
先决条件
要完成本教程，您将需要以下内容：
第 1 步 – 构建您的Autocomplete组件
该Autocomplete组件是您在自动完成功能中制作功能的地方。
创建一个Autocomplete.js文件，导入 React 并实例化一个Autocomplete类：
import React, { Component, Fragment } from "react";
import './styles.css'
class Autocomplete extends Component {
constructor(props) {
super(props);
this.state = {
activeSuggestion: 0,
filteredSuggestions: [],
showSuggestions: false,
userInput: ""
};
}
在您的州，该activeSuggestion属性定义了所选建议的索引。filteredSuggestions设置为空数组的属性与用户的输入相匹配。该showSuggestions属性将决定是否出现建议列表，并且该userInput属性为自己分配一个空字符串以接受来自用户输入的单词。
启动类并设置状态后，让我们看看要在组件中应用的方法。
在您的Autocomplete.js文件中，定义一个onChange方法并更新您的状态：
onChange = e => {
const { suggestions } = this.props;
const userInput = e.currentTarget.value;
const filteredSuggestions = suggestions.filter(
suggestion =>
suggestion.toLowerCase().indexOf(userInput.toLowerCase()) > -1
);
this.setState({
activeSuggestion: 0,
filteredSuggestions,
showSuggestions: true,
userInput: e.currentTarget.value
});
};
该方法onChange将在用户更改输入值时触发。在每次更改时，该方法将过滤到建议列表并返回不包含用户输入的建议。一旦过滤器通过，该.setState()方法将修改您状态的userInput属性以包含一个值，设置您的showSuggestions布尔值以允许显示建议，并activeSuggestion在每次方法调用时重置该属性。
onClick当用户单击建议时将调用该事件。在您的Autocomplete.js文件中，声明一个onClick方法并实现一个.setState()方法：
onClick = e => {
this.setState({
activeSuggestion: 0,
filteredSuggestions: [],
showSuggestions: false,
userInput: e.currentTarget.innerText
});
};
该.setState()方法将更新用户的输入并重置您的状态属性。
onKeyDown当用户按下某个键时，该方法将启动。在您的Autocomplete.js文件中，声明一个onKeyDown方法并设置几个条件：
onKeyDown = e => {
const { activeSuggestion, filteredSuggestions } = this.state;
if (e.keyCode === 13) {
this.setState({
activeSuggestion: 0,
showSuggestions: false,
userInput: filteredSuggestions[activeSuggestion]
});
} else if (e.keyCode === 38) {
if (activeSuggestion === 0) {
return;
}
this.setState({ activeSuggestion: activeSuggestion - 1 });
}
// User pressed the down arrow, increment the index
else if (e.keyCode === 40) {
if (activeSuggestion - 1 === filteredSuggestions.length) {
return;
}
this.setState({ activeSuggestion: activeSuggestion + 1 });
}
};
一旦你存储在您的性能activeSuggestion和filteredSuggestion在解构对象时，条件语句将检查用户按下关键中的关键代码相匹配。第一个条件将检查键代码是否匹配13，输入键，并运行该.setState()方法以更新userInput属性并关闭建议列表。如果用户按下向上箭头键 code 38，条件将减少activeSuggestion属性的索引，如果索引为零，则不返回任何内容。如果用户按下向下箭头键 code 40，条件将增加activeSuggestion属性中的索引，如果索引与filteredSuggestions属性的长度匹配，则不返回任何内容。
您的方法现已完成，让我们导航到应用您的render生命周期方法。
在您的Autocomplete.js文件中，设置一个render()语句，并在一个解构的对象中定义您的方法和状态：
render() {
const {
onChange,
onClick,
onKeyDown,
state: {
activeSuggestion,
filteredSuggestions,
showSuggestions,
userInput
}
} = this;
let suggestionsListComponent;
该变量suggestionsListComponent没有定义的值，因为您将在下面的条件中分配它们：
if (showSuggestions && userInput) {
if (filteredSuggestions.length) {
suggestionsListComponent = (
<ul class="suggestions">
{filteredSuggestions.map((suggestion, index) => {
let className;
// Flag the active suggestion with a class
if (index === activeSuggestion) {
className = "suggestion-active";
}
return (
<li className={className} key={suggestion} onClick={onClick}>
{suggestion}
</li>
);
})}
</ul>
);
} else {
suggestionsListComponent = (
<div class="no-suggestions">
<em>No suggestions available.</em>
</div>
);
}
}
第一条件将检查是否对属性的值showSuggestions和userInput存在，而在以下条件将检查的长度filteredSuggestions属性。如果满足条件，则suggestionsListComponent变量为自己分配迭代filteredSuggestions属性的值，如果索引与activeSuggestion属性中的值匹配，则使用类名标记活动建议。该suggestionsListComponent变量将在执行该onClick方法时返回建议的有序列表，并为每个建议分配一个类名。如果属性上的值showSuggestions和userInput不存在，则会出现一个文本以指示没有可用的建议。
如果用户不满足列出的条件，render()生命周期方法将返回一个 ReactFragment来应用输入字段并调用方法，而无需向文档对象模型添加额外的节点：
return (
<Fragment>
<input
type="text"
onChange={onChange}
onKeyDown={onKeyDown}
value={userInput}
/>
{suggestionsListComponent}
</Fragment>
);
}
}
export default Autocomplete;
现在您已经开发了您的Autocomplete组件，导出文件以在另一个组件中结合其功能。
第 2 步——加入你的 React 项目
该App组件是在那里你会显示您的功能Autocomplete组件。在您的index.js文件中，声明一个App组件并导入您的Autocomplete组件：
import React from "react";
import Autocomplete from "./Autocomplete";
function App() {
return (
<div>
<h1>React Autocomplete Demo</h1>
<h2>Start typing and experience the autocomplete wizardry!</h2>
<Autocomplete suggestions={"Oranges", "Apples", "Banana", "Kiwi", "Mango"]}/>
</div>
);
}
export default App
App组件中的 return 语句接受Autocomplete带有固定建议列表的组件。
第 3 步 – 设置Autocomplete组件样式
要完成您的Autocomplete组件，请使用 CSS 添加样式以定位和着色您的应用程序和输入字段。
创建一个styles.css文件并设置 CSS 规则来塑造你的Autocomplete组件：
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;
}
构建 CSS 规则后，将文件导入到Autocomplete.js文件中以应用您的样式。
结论
React 提供了一些措施来构建一个组件中可用的自动完成功能，其中包含与用户交互的内置和自定义方法。
查看 Autocomplete 组件如何在CodeSandbox 中运行。
