React Autocomplete（自動完成輸入）示例教程
摘要：
React Autocomplete示例教程是今天的主題。在現代Web開發中，使用React改善使用者體驗是很容易。自動完成的概念很簡單。它是基於使用者輸入的建議列表。然後，使用者可以按Enter鍵以完成短語。它節省了使用者的時間，這使使用者非常滿意。自動填充可以通過多種方式實現，如何過濾並...
React Autocomplete示例教程是今天的主題。在現代Web開發中，使用React改善使用者體驗是很容易。自動完成的概念很簡單。它是基於使用者輸入的建議列表。然後，使用者可以按Enter鍵以完成短語。它節省了使用者的時間，這使使用者非常滿意。自動填充可以通過多種方式實現，如何過濾並呈現給使用者，在本文中，我們將使用傳遞給我們元件的固定推薦列表。在使用者輸入時，我們將過濾結果，並僅在建議中的任何位置顯示包含使用者輸入的欄位。
如果您想了解有關React.js的更多資訊，請檢視此React 16 - 完整指南（包括React Router 4和Redux）指南。它有一個關於React和Redux的簡短介紹。ofollow,noindex" target="_blank">React 16 - 完整指南（包括React Router 4和Redux）
React Autocomplete示例教程
我們在本教程中使用名為 [react-autocomplete]的庫(https://github.com/reactjs/react-autocomplete)。 。) 但首先，讓我們使用以下命令安裝React.js 命令。
#1:安裝 React.js.
鍵入以下命令。
npx create-react-app my-app cd my-app npm start
現在，使用以下命令安裝react-autocomplete 庫。
npm install --save react-autocomplete
#2: 建立靜態資料。
在src 資料夾中，建立一個名為data.js 的檔案，並新增以下返回靜態資料的函式。
// data.js
export function getStocks() {
return [
{ abbr: 'ADANIPORTS', name: 'Adani Ports & Special Economic Zone Ltd.' },
{ abbr: 'ASIANPAINT', name: 'Asian Paints Ltd.' },
{ abbr: 'AXISBANK', name: 'Axis Bank Ltd.' },
{ abbr: 'BAJAJ-AUTO', name: 'Bajaj Auto Ltd.' },
{ abbr: 'BAJFINANCE', name: 'Bajaj Finance' },
{ abbr: 'BAJAJFINSV', name: 'Bajaj Finserv Ltd.' },
{ abbr: 'BPCL', name: 'Bharat Petroleum Corporation Ltd.' },
{ abbr: 'BHARTIARTL', name: 'Bharti Airtel Ltd.' },
{ abbr: 'INFRATEL', name: 'Bharti Infratel' },
{ abbr: 'CIPLA', name: 'Cipla Ltd.' },
{ abbr: 'COALINDIA', name: 'Coal India Ltd' },
{ abbr: 'DRREDDY', name: 'Dr. Reddys Laboratories Ltd.' },
{ abbr: 'EICHERMOT', name: 'Eicher Motors Ltd.' },
{ abbr: 'GAIL', name: 'GAIL (India) Ltd.' },
{ abbr: 'GRASIM', name: 'Grasim Industries Ltd.' },
{ abbr: 'HCLTECH', name: 'HCL Technologies Ltd.' },
{ abbr: 'HDFCBANK', name: 'HDFC Bank Ltd.' },
{ abbr: 'HEROMOTOCO', name: 'Hero MotoCorp Ltd.' },
{ abbr: 'HINDALCO', name: 'Hindalco Industries Ltd.' },
{ abbr: 'HINDPETRO', name: 'Hindustan Petroleum Corporation Ltd.' },
{ abbr: 'HINDUNILVR', name: 'Hindustan Unilever Ltd.' },
{ abbr: 'HDFC', name: 'Housing Development Finance Corporation Ltd.' },
{ abbr: 'ITC', name: 'I T C Ltd.' },
{ abbr: 'ICICIBANK', name: 'ICICI Bank Ltd.' },
{ abbr: 'IBULHSGFIN', name: 'Indiabulls Housing Finance' },
{ abbr: 'IOC/">IOC', name: 'Indian Oil Corporation Ltd.' },
{ abbr: 'INDUSINDBK', name: 'IndusInd Bank Ltd.' },
{ abbr: 'INFY', name: 'Infosys Ltd.' },
{ abbr: 'KOTAKBANK', name: 'Kotak Mahindra Bank Ltd.' },
{ abbr: 'LT', name: 'Larsen & Toubro Ltd.' },
{ abbr: 'LUPIN', name: 'Lupin Ltd.' },
{ abbr: 'M&M', name: 'Mahindra & Mahindra Ltd.' },
{ abbr: 'MARUTI', name: 'Maruti Suzuki India Ltd.' },
{ abbr: 'NTPC', name: 'NTPC Ltd.' },
{ abbr: 'ONGC', name: 'Oil & Natural Gas Corporation Ltd.' },
{ abbr: 'POWERGRID', name: 'Power Grid Corporation of India Ltd.' },
{ abbr: 'RELIANCE', name: 'Reliance Industries Ltd.' },
{ abbr: 'SBIN', name: 'State Bank of India' },
{ abbr: 'SUNPHARMA', name: 'Sun Pharmaceutical Industries Ltd.' },
{ abbr: 'TCS', name: 'Tata Consultancy Services Ltd.' },
{ abbr: 'TATAMOTORS', name: 'Tata Motors Ltd.' },
{ abbr: 'TATASTEEL', name: 'Tata Steel Ltd.' },
{ abbr: 'TECHM', name: 'Tech Mahindra Ltd.' },
{ abbr: 'TITAN', name: 'Titan Company Ltd.' },
{ abbr: 'ULTRACEMCO', name: 'UltraTech Cement Ltd.' },
{ abbr: 'UPL', name: 'UPL Ltd.' },
{ abbr: 'VEDL', name: 'Vedanta Ltd' },
{ abbr: 'WIPRO', name: 'Wipro Ltd.' },
{ abbr: 'YESBANK', name: 'Yes Bank Ltd.' },
{ abbr: 'ZEEL', name: 'Zee Entertainment Enterprises Ltd.' }
];
}
此功能將返回前50名股票 名稱及其印度股票市場的縮寫。
另外，我們需要在這裡再建立一個函式，那就是matchStocks。
此功能允許我們過濾掉使用者在輸入區域中輸入的股票。因此，當用戶開始在文字框中鍵入時，它將與股票陣列進行比較，如果找到匹配則返回並顯示給使用者。
所以編寫第二個函式並從data.js 檔案中匯出它。
// data.js
export function matchStocks(state, value) {
return (
state.name.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
state.abbr.toLowerCase().indexOf(value.toLowerCase()) !== -1
);
}
所以，現在基本上，我們在App.js 檔案中匯入這些函式並將其傳遞給Autocomplete 元件。
#3: Autocomplete API
它具有以下屬性。
value: 這是文字框的預設值，在我們的例子中，它將為空或“。
inputProps：這是一個物件。Props傳遞給props.renderInput
。;預設情況下，除非您為props.renderInput
指定了自定義值，否則這些道具將應用於由自動完成
呈現的<input />
元素。
wrapperStyle：它是一個物件，它具有以下的預設值。
{
display: 'inline-block'
}
items：這是一個數據陣列，在data.js 檔案中定義。在我們的例子中，它是股票市場資料。
getItemValue：用於讀取項中每個條目的顯示值。
shouldItemRender：這是一個功能。為專案 中的每個條目呼叫，其返回值用於確定是否應在下拉選單中顯示。通過de，fault總是呈現所有專案。
onChange：這是一個函式，每次使用者更改輸入值時都會呼叫它。
onSelect：此功能在使用者從下拉選單中選擇專案時呼叫。
renderMenu：這是函式並被呼叫以生成drop-dn選單的渲染樹。確保返回的樹包含項 中的每個條目，否則突出顯示的順序和鍵盤導航邏輯將中斷。樣式 將包含{top，left，minWidth}，它們是左上角的座標和下拉選單的寬度。
renderItem：這是函式，併為專案 中的每個條目呼叫，它還傳遞shouldItemRender 以生成下拉選單中每個專案的渲染樹。樣式 是一組可選樣式，可用於改善下拉選單中專案的外觀。
＃4：將自動填充元件新增到App.js檔案中。
所以我們的最終App.js 檔案看起來像這樣。
import React, { Component } from 'react';
import Autocomplete from'react-autocomplete';
import { getStocks, matchStocks } from './data';
import './App.css';
class App extends Component {
state = { value: '' };
render() {
return (
item.name }
shouldItemRender={ matchStocks }
onChange={(event, value) => this.setState({ value }) }
onSelect={ value => this.setState({ value }) }
renderMenu={ children => (
{ children }
)}
renderItem={ (item, isHighlighted) => (
{ item.name }
)}
/>
);
}
}
export default App;
在這裡，我們使用了前面討論過的所有屬性。其中一些仍然沒有，但你可以在Github上檢視。
我們的data.js 檔案看起來像這樣。
// data.js
export function getStocks() {
return [
{ abbr: 'ADANIPORTS', name: 'Adani Ports & Special Economic Zone Ltd.' },
{ abbr: 'ASIANPAINT', name: 'Asian Paints Ltd.' },
{ abbr: 'AXISBANK', name: 'Axis Bank Ltd.' },
{ abbr: 'BAJAJ-AUTO', name: 'Bajaj Auto Ltd.' },
{ abbr: 'BAJFINANCE', name: 'Bajaj Finance' },
{ abbr: 'BAJAJFINSV', name: 'Bajaj Finserv Ltd.' },
{ abbr: 'BPCL', name: 'Bharat Petroleum Corporation Ltd.' },
{ abbr: 'BHARTIARTL', name: 'Bharti Airtel Ltd.' },
{ abbr: 'INFRATEL', name: 'Bharti Infratel' },
{ abbr: 'CIPLA', name: 'Cipla Ltd.' },
{ abbr: 'COALINDIA', name: 'Coal India Ltd' },
{ abbr: 'DRREDDY', name: 'Dr. Reddys Laboratories Ltd.' },
{ abbr: 'EICHERMOT', name: 'Eicher Motors Ltd.' },
{ abbr: 'GAIL', name: 'GAIL (India) Ltd.' },
{ abbr: 'GRASIM', name: 'Grasim Industries Ltd.' },
{ abbr: 'HCLTECH', name: 'HCL Technologies Ltd.' },
{ abbr: 'HDFCBANK', name: 'HDFC Bank Ltd.' },
{ abbr: 'HEROMOTOCO', name: 'Hero MotoCorp Ltd.' },
{ abbr: 'HINDALCO', name: 'Hindalco Industries Ltd.' },
{ abbr: 'HINDPETRO', name: 'Hindustan Petroleum Corporation Ltd.' },
{ abbr: 'HINDUNILVR', name: 'Hindustan Unilever Ltd.' },
{ abbr: 'HDFC', name: 'Housing Development Finance Corporation Ltd.' },
{ abbr: 'ITC', name: 'I T C Ltd.' },
{ abbr: 'ICICIBANK', name: 'ICICI Bank Ltd.' },
{ abbr: 'IBULHSGFIN', name: 'Indiabulls Housing Finance' },
{ abbr: 'IOC', name: 'Indian Oil Corporation Ltd.' },
{ abbr: 'INDUSINDBK', name: 'IndusInd Bank Ltd.' },
{ abbr: 'INFY', name: 'Infosys Ltd.' },
{ abbr: 'KOTAKBANK', name: 'Kotak Mahindra Bank Ltd.' },
{ abbr: 'LT', name: 'Larsen & Toubro Ltd.' },
{ abbr: 'LUPIN', name: 'Lupin Ltd.' },
{ abbr: 'M&M', name: 'Mahindra & Mahindra Ltd.' },
{ abbr: 'MARUTI', name: 'Maruti Suzuki India Ltd.' },
{ abbr: 'NTPC', name: 'NTPC Ltd.' },
{ abbr: 'ONGC', name: 'Oil & Natural Gas Corporation Ltd.' },
{ abbr: 'POWERGRID', name: 'Power Grid Corporation of India Ltd.' },
{ abbr: 'RELIANCE', name: 'Reliance Industries Ltd.' },
{ abbr: 'SBIN', name: 'State Bank of India' },
{ abbr: 'SUNPHARMA', name: 'Sun Pharmaceutical Industries Ltd.' },
{ abbr: 'TCS', name: 'Tata Consultancy Services Ltd.' },
{ abbr: 'TATAMOTORS', name: 'Tata Motors Ltd.' },
{ abbr: 'TATASTEEL', name: 'Tata Steel Ltd.' },
{ abbr: 'TECHM', name: 'Tech Mahindra Ltd.' },
{ abbr: 'TITAN', name: 'Titan Company Ltd.' },
{ abbr: 'ULTRACEMCO', name: 'UltraTech Cement Ltd.' },
{ abbr: 'UPL', name: 'UPL Ltd.' },
{ abbr: 'VEDL', name: 'Vedanta Ltd' },
{ abbr: 'WIPRO', name: 'Wipro Ltd.' },
{ abbr: 'YESBANK', name: 'Yes Bank Ltd.' },
{ abbr: 'ZEEL', name: 'Zee Entertainment Enterprises Ltd.' }
];
}
export function matchStocks(state, value) {
return (
state.name.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
state.abbr.toLowerCase().indexOf(value.toLowerCase()) !== -1
);
}
最後，App.css 檔案看起來像這樣。
body {
color: #333;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 200;
}
.example {
padding: 0 25px;
}
label {
display: block;
margin: 5px 0;
}
code {
padding: .2em .5em;
font-size: 85%;
background-color: rgba(0,0,0,0.04);
border-radius: 3px;
}
.menu {
position: absolute;
box-sizing: border-box;
width: 100%;
border: 1px solid #cccccc;
}
.item {
padding: 2px 6px;
cursor: default;
}
.item-highlighted {
color: white;
background-color: #4095bf;
}
.item-header {
background-color: #eeeeee;
color: #454545;
font-weight: bold;
}
儲存所有檔案並轉到 http：// localhost：3000 /
從資料陣列中鍵入股票，您將獲得建議。
所以，最後，我們已經完成了React Autocomplete示例教程。 感謝您的參與。