资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/React Autocomplete（自动完成输入）示例教程

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

hzc / 3028人阅读

摘要：示例教程是今天的主题。样式将包含，，，它们是左上角的坐标和下拉菜单的宽度。这是函数，并为项目中的每个条目调用，它还传递以生成下拉菜单中每个项目的渲染树。样式是一组可选样式，可用于改善下拉菜单中项目的外观。所以，最后，我们已经完成了示例教程。

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 指定了自定义值，否则这些道具将应用于由自动完成呈现的元素。

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示例教程。感谢您的参与。

GPU云服务器 云服务器 自动完成 自动完成文本框 自动完成下拉框 jquery自动完成

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97554.html

相关文章

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

    摘要：示例教程是今天的主题。样式将包含，，，它们是左上角的坐标和下拉菜单的宽度。这是函数，并为项目中的每个条目调用，它还传递以生成下拉菜单中每个项目的渲染树。样式是一组可选样式，可用于改善下拉菜单中项目的外观。所以，最后，我们已经完成了示例教程。 React Autocomplete示例教程是今天的主题。在现代Web开发中，使用React改善用户体验是很容易。自动完成的概念很简单。它是基于用...

    lk20150415 评论0 收藏0

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

    摘要：示例教程是今天的主题。样式将包含，，，它们是左上角的坐标和下拉菜单的宽度。这是函数，并为项目中的每个条目调用，它还传递以生成下拉菜单中每个项目的渲染树。样式是一组可选样式，可用于改善下拉菜单中项目的外观。所以，最后，我们已经完成了示例教程。 React Autocomplete示例教程是今天的主题。在现代Web开发中，使用React改善用户体验是很容易。自动完成的概念很简单。它是基于用...

    woshicixide 评论0 收藏0

  • 禁止浏览器自动填充

    摘要：如何禁止浏览器自动填充属性规定输入字段是否应该启用自动完成功能方法一设置没错，是可以控制浏览器自动完成功能，但文档里说可以禁止浏览器自动填充，经过实际操作一试，然而并不能，已经失效了，经过探索发现注意在像，等项目中应该用驼峰命名法加到对 如何禁止浏览器自动填充 autocomplete 属性规定输入字段是否应该启用自动完成功能 方法一：设置autocomplete=new-passwo...

    Jioby 评论0 收藏0

  • HTML5 入门详解

    摘要：定义字符中文注音或字符的解释或发音。表单域我们都知道标签用于为用户输入创建表单。在中表单域添加了两个新的属性规定是否启用表单的自动完成功能，默认。通过属性和表单域的可以将输入表单绑定到表单域中。 showImg(http://ww1.sinaimg.cn/large/007kscFEgy1fxgnw4hajoj31400p0q4d.jpg); 1. 认识HTML5 HTML5并不仅仅...

    hqman 评论0 收藏0

发表评论

登陆后可评论

0条评论

hzc

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<