1. 首页
  2. 文章中心
  3. javascript

React Autocomplete（自动完成输入）示例教程

81 阅读 0 评论
我是靠谱客的博主 丰富方盒，最近开发中收集的这篇文章主要介绍 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/re...。但首先，让我们使用以下命令安装 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 /

从数据数组中键入股票，您将获得建议补全列表。

clipboard.png

所以，最后，我们已经完成了 React Autocomplete示例教程。感谢您的参与。

最后

以上就是丰富方盒为你收集整理的 React Autocomplete（自动完成输入）示例教程的全部内容，希望文章能够帮你解决 React Autocomplete（自动完成输入）示例教程所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(54)

相关文章

react-native-autocomplete-input 自动完成
react-native-autocomplete-input 自动完成
ReactNative一个自己撸的menu组件
ReactNative一个自己撸的menu组件
RN 组件 Modal 模态框遮罩层RN 组件 Modal 模态框遮罩层
RN 组件 Modal 模态框遮罩层RN 组件 Modal 模态框遮罩层
React-native输入框如何绑定清除数据
React-native输入框如何绑定清除数据
React Autocomplete（自动完成输入）示例教程
React Autocomplete（自动完成输入）示例教程
React Native输入框获取输入的内容、输入框的密码类型
React Native输入框获取输入的内容、输入框的密码类型
RN-常用第三方组件
RN-常用第三方组件
native react 二级菜单_RN-常用第三方组件之react-native-side-menu 左右侧栏
native react 二级菜单_RN-常用第三方组件之react-native-side-menu 左右侧栏

评论列表共有 0 条评论

立即
投稿
返回
顶部