数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学ReactJS中的自动完成和建议
在这篇文章中，我们将学习如何在React JS中创建一个自动完成和建议框。自动完成是每个网站都具备的基本功能之一，但是，在React网站中实现它非常复杂且存在问题。在这里，我们将看到在React JS中轻松实现自动完成的方法。
首先创建一个React项目：
npx create-react-app tutorialpurpose
现在进入项目目录：
cd tutorialpurpose
示例
首先下载一个包：
npm install --save downshift
此库用于为搜索框添加建议列表，列表将写入数组中。
您只需复制以下代码并更改其样式和数组数据。如果您的数组结构包含任何其他键（这里，我使用“value”作为键），那么您只需要更改<ul>标签下键的名称。
在App.js中添加以下代码：
import * as React from "react";
import Downshift from "downshift";
const items = [
{ value: "apple" },
{ value: "pear" },
{ value: "orange" },
{ value: "grape" },
{ value: "banana" },
];
export default function App() {
return (
<Downshift
onChange={(selection) =>
alert(
selection ? `You selected ${selection.value}` : "Selection Cleared"
)
}
itemToString={(item) => (item ? item.value : "")}>
{({
getInputProps,
getItemProps,
getLabelProps,
getMenuProps,
isOpen,
inputValue,
highlightedIndex,
selectedItem,
getRootProps,
}) => (
<div>
<label {...getLabelProps()}>Enter a fruit</label>
<div
style={{ display: "inline-block" }}
{...getRootProps({}, { suppressRefError: true })}
>
<input {...getInputProps()} />
</div>
<ul {...getMenuProps()}>
{isOpen
? items
.filter(
(item) => !inputValue || item.value.includes(inputValue)).map((item, index)=> (
<li
{...getItemProps({
key: item.value,
index,
item,
style: {
backgroundColor:
highlightedIndex === index ? "lightgray" : "white",fontWeight: selectedItem === item ?"bold" : "normal",},})}>{item.value}</li>)): null}
</ul>
</div>
)}
</Downshift>
);
}解释
首先，我们创建了一个水果数组。在return中，我们创建了一个Downshift组件，在其中我们定义了选择任何选项后将弹出警报。我们在itemToString属性中将所有项目更改为字符串。
然后在<Downshift>和</Downshift>之间，我们遍历downshift默认设置。
在映射中，我们定义了默认的LabelProps，默认的rootDiv prop，并在<ul>中，我们定义了默认的menu props。menu props是一个我们将从中提出建议的列表。
在<ul>中，我们根据搜索输入框中的输入进行简单过滤，然后遍历它。
在<li>中，我们添加了一些默认属性作为建议和自动完成的参考，以及样式。您可以调整样式，但除非您知道自己在做什么，否则不要调整其他内容。
输出
它将产生以下输出：
更新于：2021年9月28日
1K+ 次浏览
广告