資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
廣告