React Autocomplete（自動完成輸入）示例教程

woshicixide 發(fā)布于2019-08-29 16:41 / 2020人閱讀

摘要：示例教程是今天的主題。樣式將包含，，，它們是左上角的坐標和下拉菜單的寬度。這是函數(shù)，并為項目中的每個條目調(diào)用，它還傳遞以生成下拉菜單中每個項目的渲染樹。樣式是一組可選樣式，可用于改善下拉菜單中項目的外觀。所以，最后，我們已經(jīng)完成了示例教程。

React Autocomplete示例教程是今天的主題。在現(xiàn)代Web開發(fā)中，使用React改善用戶體驗是很容易。自動完成的概念很簡單。它是基于用戶輸入的建議列表。然后，用戶可以按Enter鍵以完成短語。它節(jié)省了用戶的時間，這使用戶非常滿意。自動填充可以通過多種方式實現(xiàn)，如何過濾并呈現(xiàn)給用戶，在本文中，我們將使用傳遞給我們組件的固定推薦列表。在用戶輸入時，我們將過濾結果，并僅在建議中的任何位置顯示包含用戶輸入的字段。

如果您想了解有關React.js的更多信息，請查看此React 16 - 完整指南（包括React Router 4和Redux）指南。它有一個關于React和Redux的簡短介紹。React 16 - 完整指南（包括React Router 4和Redux）

React Autocomplete示例教程
我們在本教程中使用名為 [react-autocomplete]的庫(https://github.com/reactjs/re...。但首先，讓我們使用以下命令安裝 React.js 命令。

1:安裝 React.js.

鍵入以下命令。

npx create-react-app my-app
cd my-app
npm start

現(xiàn)在，使用以下命令安裝 react-autocomplete 庫。

npm install --save react-autocomplete

2: 創(chuàng)建靜態(tài)數(shù)據(jù)。

在 src 文件夾中，創(chuàng)建一個名為 data.js 的文件，并添加以下返回靜態(tài)數(shù)據(jù)的函數(shù)。

// 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." }
  ];
}

此功能將返回前50名股票名稱及其印度股票市場的縮寫。

另外，我們需要在這里再創(chuàng)建一個函數(shù)，那就是 matchStocks。

此功能允許我們過濾掉用戶在輸入?yún)^(qū)域中輸入的股票。因此，當用戶開始在文本框中鍵入時，它將與股票數(shù)組進行比較，如果找到匹配則返回并顯示給用戶。

所以編寫第二個函數(shù)并從 data.js 文件中導出它。

// data.js

export function matchStocks(state, value) {
  return (
    state.name.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
    state.abbr.toLowerCase().indexOf(value.toLowerCase()) !== -1
  );
}

所以，現(xiàn)在基本上，我們在 App.js 文件中導入這些函數(shù)并將其傳遞給 Autocomplete 組件。

3: Autocomplete API

它具有以下屬性。

value: 這是文本框的默認值，在我們的例子中，它將為空或“。

inputProps：這是一個對象。Props傳遞給 props.renderInput 。;默認情況下，除非您為 props.renderInput 指定了自定義值，否則這些道具將應用于由自動完成呈現(xiàn)的元素。

wrapperStyle：它是一個對象，它具有以下的默認值。

{
display: "inline-block"
}

items：這是一個數(shù)據(jù)數(shù)組，在 data.js 文件中定義。在我們的例子中，它是股票市場數(shù)據(jù)。

getItemValue：用于讀取項中每個條目的顯示值。

shouldItemRender：這是一個功能。為項目中的每個條目調(diào)用，其返回值用于確定是否應在下拉菜單中顯示。通過de，fault總是呈現(xiàn)所有項目。

onChange：這是一個函數(shù)，每次用戶更改輸入值時都會調(diào)用它。

onSelect：此功能在用戶從下拉菜單中選擇項目時調(diào)用。

renderMenu：這是函數(shù)并被調(diào)用以生成drop-dn菜單的渲染樹。確保返回的樹包含項中的每個條目，否則突出顯示的順序和鍵盤導航邏輯將中斷。樣式將包含{top，left，minWidth}，它們是左上角的坐標和下拉菜單的寬度。

renderItem：這是函數(shù)，并為項目中的每個條目調(diào)用，它還傳遞 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;
}

保存所有文件并轉(zhuǎn)到 http：// localhost：3000 /

從數(shù)據(jù)數(shù)組中鍵入股票，您將獲得建議補全列表。

所以，最后，我們已經(jīng)完成了 React Autocomplete示例教程。感謝您的參與。

GPU云服務器云服務器自動完成自動完成文本框自動完成下拉框 jquery自動完成

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113905.html

React Autocomplete（自動完成輸入）示例教程

摘要：示例教程是今天的主題。樣式將包含，，，它們是左上角的坐標和下拉菜單的寬度。這是函數(shù)，并為項目中的每個條目調(diào)用，它還傳遞以生成下拉菜單中每個項目的渲染樹。樣式是一組可選樣式，可用于改善下拉菜單中項目的外觀。所以，最后，我們已經(jīng)完成了示例教程。 React Autocomplete示例教程是今天的主題。在現(xiàn)代Web開發(fā)中，使用React改善用戶體驗是很容易。自動完成的概念很簡單。它是基于用...

lk20150415 2019-08-02 16:04 評論0 收藏0
React Autocomplete（自動完成輸入）示例教程

摘要：示例教程是今天的主題。樣式將包含，，，它們是左上角的坐標和下拉菜單的寬度。這是函數(shù)，并為項目中的每個條目調(diào)用，它還傳遞以生成下拉菜單中每個項目的渲染樹。樣式是一組可選樣式，可用于改善下拉菜單中項目的外觀。所以，最后，我們已經(jīng)完成了示例教程。 React Autocomplete示例教程是今天的主題。在現(xiàn)代Web開發(fā)中，使用React改善用戶體驗是很容易。自動完成的概念很簡單。它是基于用...

hzc 2019-08-23 11:50 評論0 收藏0
禁止瀏覽器自動填充

摘要：如何禁止瀏覽器自動填充屬性規(guī)定輸入字段是否應該啟用自動完成功能方法一設置沒錯，是可以控制瀏覽器自動完成功能，但文檔里說可以禁止瀏覽器自動填充，經(jīng)過實際操作一試，然而并不能，已經(jīng)失效了，經(jīng)過探索發(fā)現(xiàn)注意在像，等項目中應該用駝峰命名法加到對如何禁止瀏覽器自動填充 autocomplete 屬性規(guī)定輸入字段是否應該啟用自動完成功能方法一：設置autocomplete=new-passwo...

Jioby 2019-08-02 11:56 評論0 收藏0
HTML5 入門詳解

摘要：定義字符中文注音或字符的解釋或發(fā)音。表單域我們都知道標簽用于為用戶輸入創(chuàng)建表單。在中表單域添加了兩個新的屬性規(guī)定是否啟用表單的自動完成功能，默認。通過屬性和表單域的可以將輸入表單綁定到表單域中。 showImg(http://ww1.sinaimg.cn/large/007kscFEgy1fxgnw4hajoj31400p0q4d.jpg); 1. 認識HTML5 HTML5并不僅僅...

hqman 2019-08-26 13:25 評論0 收藏0