1. 首页

React Autocomplete(自动完成输入)示例教程

React Autocomplete示例教程是今天的主题。在现代Web开发中,使用React改善用户体验是很容易。自动完成的概念很简单。它是基于用户输入的建议列表。然后,用户可以按Enter键以完成短语。它节省了用户的时间,这使用户非常满意。自动填充可以通过多种方式实现,如何过滤并呈现给用户,在本文中,我们将使用传递给我们组件的固定推荐列表。在用户输入时,我们将过滤结果,并仅在建议中的任何位置显示包含用户输入的字段。

如果您想了解有关React.js的更多信息,请查看此React 16 – 完整指南(包括React Router 4和Redux)指南。它有一个关于React和Redux的简短介绍。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', 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示例教程。感谢您的参与。

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:React Autocomplete(自动完成输入)示例教程

链接:https://www.javascriptc.com/2012.html

原文链接:https://www.zcfy.cc/article/react-autocomplete-example-tutorial

« 在 Create React App 中如何使用代码分离
在webpack中使用prefetch或preload指北»
Flutter 中文教程资源

相关推荐

QR code