ReactAutocomplete示例教程是今天的主题。在现代Web开发中，使用React改善用户体验很容易。自动完成的概念很简单。它是基于用户输入的建议列表。然后用户可以按Enter来完成该短语。它节省了用户的时间，使用户非常高兴。自动完成可以通过多种方式实现，如何过滤和呈现给用户，在本文中我们将使用固定的建议列表传递给我们的组件。当用户输入时，我们会过滤结果并仅在建议的任何位置显示包含用户输入的字段。如果您想了解有关React.js的更多信息，请查看此React16-完整指南（包括ReactRouter4和Redux）指南。它对React和Redux进行了简短介绍。React16-完整指南（包括ReactRouter4和Redux）使用以下命令安装React.js。1：安装React.js。键入以下命令。npxcreate-react-appmy-appcdmy-appnpmstart现在，使用以下命令安装react-autocomplete库。npminstall?-savereact-autocomplete2：创建静态数据。在src文件夹中，创建一个名为data.js的文件，并添加以下返回静态数据的函数。//data.jsexportfunctiongetStocks(){return[{abbr:'ADANIPORTS',name:'AdaniPorts&SpecialEconomicZoneLtd.'},{abbr:'ASIANPAINT',name:'AsianPaintsLtd.'},{abbr:'AXISBANK',name:'AxisBankLtd.'},{缩写:'BAJAJ-AUTO',名称:'BajajAutoLtd.'},{abbr:'BAJFINANCE',name:'BajajFinance'},{abbr:'BAJAJFINSV',name:'BajajFinservLtd.'},{abbr:'BPCL',name:'BharatPetroleumCorporationLtd.'},{缩写：'BHARTIARTL'，名称：'BhartiAirtelLtd.'},{abbr:'INFRATEL',name:'BhartiInfratel'},{abbr:'CIPLA',name:'CiplaLtd.'},{abbr:'COALINDIA',name:'CoalIndiaLtd'},{abbr:'DRREDDY',name:'Dr.ReddysLaboratoriesLtd.'},{缩写：'EICHERMOT'，名称：'EicherMotorsLtd.'},{abbr:'GAIL',name:'GAIL(India)Ltd.'},{缩写：'GRASIM'，名称：'GrasimIndustriesLtd.'},{缩写：'HCLTECH'，名称：'HCLTechnologiesLtd.'},{缩写:'HDFCBANK',名称:'HDFC银行有限公司},{缩写：'HEROMOTOCO'，名称：'HeroMotoCorpLtd.'},{缩写：'HINDALCO'，名称：'HindalcoIndustriesLtd.'},{abbr:'HINDPETRO',name:'HindustanPetroleumCorporationLtd.'},{abbr:'HINDUNILVR',name:'HindustanUnileverLtd.'},{abbr:'HDFC',name:'HousingDevelopmentFinanceCorporationLtd.'},{abbr:'ITC',name:'ITCLtd.'},{abbr:'ICICIBANK',name:'ICICIBankLtd.'},{abbr:'IBULHSGFIN',name:'IndiabullsHousingFinance'},{abbr:'IOC',name:'IndianOilCorporationLtd.'},{abbr:'INDUSINDBK',name:'IndusIndBankLtd.'},{缩写：'INFY'，名称：'InfosysLtd.'},{abbr:'KOTAKBANK',name:'KotakMahindraBankLtd.'},{abbr:'LT',name:'Larsen&ToubroLtd.'},{abbr:'LUPIN',name:'LupinLtd.'},{缩写：'M&M'，名称：'Mahindra&MahindraLtd.'},{abbr:'MARUTI',name:'MarutiSuzukiIndiaLtd.'},{缩写:'NTPC',名称:'NTPCLtd.'},{缩写:'ONGC',名称:'石油和天然气有限公司'},{abbr:'POWERGRID',name:'PowerGridCorporationofIndiaLtd.'},{abbr:'RELIANCE',name:'RelianceIndustriesLtd.'},{abbr:'SBIN',name:'StateBankofIndia'},{abbr:'SUNPHARMA',name:'SunPharmaceuticalIndustriesLtd.'},{abbr:'TCS',name:'塔塔咨询服务有限公司'},{abbr:'TATAMOTORS',name:'塔塔汽车有限公司'},{abbr:'TATASTEEL',name:'塔塔钢铁有限公司'},{缩写:'TECHM',名称:'TechMahindraLtd.'},{abbr:'TITAN',name:'TitanCompanyLtd.'},{缩写：'ULTRACEMCO'，名称：'UltraTechCementLtd.'},{缩写:'UPL',名称:'UPLLtd.'},{abbr:'VEDL',name:'VedantaLtd'},{abbr:'WIPRO',name:'WiproLtd.'},{abbr:'YESBANK',name:'YesBankLtd.'},{缩写:'ZEEL',名称:'ZeeEntertainmentEnterprisesLtd.'}];}此函数将返回印度股票市场前50名的股票名称及其缩写此外，我们还需要在此处创建另一个函数，matchStocks。此功能允许我们过滤掉用户在输入字段中输入的股票。因此，当用户开始在文本框中输入时，它会与库存数组进行比较，如果找到匹配项，则会返回并显示给用户。因此编写第二个函数并将其从data.js文件中导出。//data.jsexport函数matchStocks(state,value){return(state.name.toLowerCase().indexOf(value.toLowerCase())!==-1||state.abbr.toLowerCase().indexOf(value.toLowerCase())!==-1);}所以，现在基本上，我们在App.js文件中导入这些函数并将它们传递给自动完成组件。3：AutocompleteAPI它具有以下属性。value：这是文本框的默认值，在我们的例子中它将为空或“。inputProps：这是一个对象。传递给props.renderInput的道具。；默认情况下，除非您为props.renderInput指定自定义值，否则这些道具将应用于由自动完成呈现的元素。wrapperStyle：它是一个具有以下默认值的对象。{display：'inline-block'}items：这是一个数据数组，定义在数据中.js文件，在我们的例子中是股市数据getItemValue：用于读取item中每一项的显示值shouldItemRender：这是一个函数，对于item中的每一个item调用，返回值为用于决定是否应该在下拉菜单中显示。按de，fault总是渲染所有item。从下拉菜单中选择一个项目。renderMenu：这是函数并且是调用以生成drop-dn菜单的渲染树。确保返回的树包含项目中的每个条目，否则突出显示和键盘导航逻辑的顺序将中断。样式将包含{top,left,minWidth}这是左上角的坐标和下拉菜单的宽度.renderItem：这是为项目中的每个项目调用的函数，它还通过shouldItemRender为下拉列表中的每个项目生成渲染树。样式是一组可选的样式，可用于改善下拉菜单中项目的外观。4:将自动填充组件添加到App.js文件中。所以我们最终的App.js文件看起来像这样。importReact,{Component}from'react';importAutocompletefrom'react-autocomplete';import{getStocks,matchStocks}from'./data';import'./App.css';classAppextendsComponent{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})}/>);}}exportdefaultApp;这里我们使用上面讨论的所有属性。其中一些仍然不可用，但您可以在Github上查看它们。我们的data.js文件看起来像这样。//data.jsexportfunctiongetStocks(){return[{abbr:'ADANIPORTS',name:'AdaniPorts&SpecialEconomicZoneLtd.'},{abbr:'ASIANPAINT',name:'AsianPaintsLtd.'},{abbr:'AXISBANK',name:'AxisBankLtd.'},{缩写:'BAJAJ-AUTO',名称:'BajajAutoLtd.'},{abbr:'BAJFINANCE',name:'BajajFinance'},{abbr:'BAJAJFINSV',name:'BajajFinservLtd.'},{abbr:'BPCL',name:'BharatPetroleumCorporationLtd.'},{缩写：'BHARTIARTL'，名称：'BhartiAirtelLtd.'},{abbr:'INFRATEL',name:'BhartiInfratel'},{abbr:'CIPLA',name:'CiplaLtd.'},{abbr:'COALINDIA',name:'CoalIndiaLtd'},{abbr:'DRREDDY',name:'Dr.ReddysLaboratoriesLtd.'},{缩写：'EICHERMOT'，名称：'EicherMotorsLtd.'},{abbr:'GAIL',name:'GAIL(India)Ltd.'},{缩写：'GRASIM'，名称：'GrasimIndustriesLtd.'},{缩写：'HCLTECH'，名称：'HCLTechnologiesLtd.'},{缩写:'HDFCBANK',名称:'HDFC银行有限公司'},{缩写：'HEROMOTOCO'，名称：'HeroMotoCorpLtd.'},{缩写：'HINDALCO'，名称：'HindalcoIndustriesLtd.'},{abbr:'HINDPETRO',name:'HindustanPetroleumCorporationLtd.'},{abbr:'HINDUNILVR',name:'HindustanUnileverLtd.'},{abbr:'HDFC',name:'HousingDevelopmentFinanceCorporationLtd.'},{abbr:'ITC',name:'ITCLtd.'},{abbr:'ICICIBANK',name:'ICICIBankLtd.'},{abbr:'IBULHSGFIN',name:'IndiabullsHousingFinance'},{abbr:'IOC',name:'IndianOilCorporationLtd.'},{abbr:'INDUSINDBK',name:'IndusIndBankLtd.'},{缩写：'INFY'，名称：'InfosysLtd.'},{abbr:'KOTAKBANK',name:'KotakMahindraBankLtd.'},{abbr:'LT',name:'Larsen&ToubroLtd.'},{abbr:'LUPIN',name:'LupinLtd.'},{缩写：'M&M'，名称：'Mahindra&MahindraLtd.'},{abbr:'MARUTI',name:'MarutiSuzukiIndiaLtd.'},{缩写:'NTPC',名称:'NTPCLtd.'},{缩写:'ONGC',名称:'石油和天然气有限公司'},{abbr:'POWERGRID',name:'PowerGridCorporationofIndiaLtd.'},{缩写：'RELIANCE'，名称：'RelianceIndustriesLtd.'},{abbr:'SBIN',name:'StateBankofIndia'},{abbr:'SUNPHARMA',name:'SunPharmaceuticalIndustriesLtd.'},{缩写：'TCS'，名称：'塔塔咨询服务有限公司'},{abbr:'TATAMOTORS',name:'塔塔汽车有限公司'},{abbr:'TATASTEEL',name:'塔塔钢铁有限公司'},{缩写：'TECHM'，名称：'TechMahindraLtd.'},{abbr:'TITAN',name:'TitanCompanyLtd.'},{缩写：'ULTRACEMCO'，名称：'UltraTechCementLtd.'},{缩写:'UPL',名称:'UPLLtd.'},{abbr:'VEDL',name:'VedantaLtd'},{abbr:'WIPRO',name:'WiproLtd.'},{abbr:'YESBANK',name:'YesBankLtd.'},{缩写:'ZEEL',名称:'ZeeEntertainmentEnterprisesLtd.'}];}导出函数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:"HelveticaNeue",Arial,sans-serif;font-weight:200;}.example{padding:025px;}label{display:block;margin:5px0;}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:1pxsolid#cccccc;}.item{padding:2px6px;cursor:default;}.item-highlighted{color:white;background-color:#4095bf;}.项目标题{背景颜色：#eeeeee;颜色：#454545；字体粗细：粗体；}保存所有文件并转到http://localhost:3000/typestockfromdataarray，您将获得建议完成列表。所以，最后，我们完成了React自动完成示例教程。感谢您的参与。
