npm 包 infotrack-react-autosuggest 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，由于需要反复使用代码，社区的代码共享非常重要。npm 作为其中一个重要的代码分享平台，提供了很多实用的包供前端开发者使用。

在这篇文章中，将会介绍一个名为 infotrack-react-autosuggest 的 npm 包，它提供了一个可自动建议选择的 React 组件，可以帮助我们优化表单及搜索栏等输入类组件的用户体验。

使用说明

安装

$ npm install infotrack-react-autosuggest --save

导入

import React from 'react';
import Autosuggest from 'infotrack-react-autosuggest';
import 'infotrack-react-autosuggest/dist/index.css';

API

属性	类型	必须	说明
suggestions	Array	是	候选列表
onSuggestions	Function	是	可以根据用户输入更新候选列表的函数
suggestionTitle	Function or Element	否	自定义候选项的标题
suggestionValue	Function or Element	否	自定义候选项的值，如果不设置，默认使用 suggestion
onSelected	Function	否	用户选择了一个候选项后对应的回调函数
placeholder	String	否	未开始输入时的提示文字
inputStyle	Object	否	自定义输入框样式
suggestionStyle	Object	否	自定义候选框样式
highlightStyle	Object	否	自定义匹配结果的高亮样式
debounce	Number	否	输入的防抖时间
minLength	Number	否	触发更新候选列表的最小字符数
maxSuggestion	Number	否	最多展示的候选项数
defaultIndex	Number	否	默认选择的候选项的下标
render	Function	否	自定义渲染组件
value	String	否	输入框的值（受控组件）
defaultValue	String	否	输入框的默认值（非受控组件）
autoFocus	Boolean	否	是否默认聚焦到输入框
separator	String	否	分隔符，用于多个输入值的场景
inputAttributes	Object	否	自定义输入框的 attribute 属性
suggestionsData	Array or Promise	否	如果传入 Array，一定在 suggestions 更改前传入
loadingRenderer	Function or Element	否	自定义加载提示的样式
Loading	Function or Element	否	自定义异步加载加载器
scrollBar	Object	否	自定义滚动条样式
grid	Object or Undefined	否	自定义候选项的网格样式
enableTabSelect	Boolean	否	是否允许使用 Tab 键选中候选项

示例

-- -------------------- ---- -------
------------
  --------------
    -------- ---------- --------- ------------
    --------- ---------- ------------ -------
    ------ ------------- -------- --------
    ------- -------- -------- ---------
    --------- --------------- -------- -------
    ------------ ------- ------------ -------------
  --
  -------------------- -- ---------------------------
  ----------------- -- ------------------------
  ------------------
--

此示例中，我们将一个水果列表传入 suggestions 属性中，onSuggestions 属性中的函数用于根据用户输入更新候选列表，onSelected 属性中的函数用于处理用户选择了哪个选项。

总结

infotrack-react-autosuggest 作为一款可自动建议选择的 React 组件，提供了很多个性化的配置选项，完全可以满足各种输入表单或搜索栏等输入类组件的需求。希望本文对于使用该组件的用户有所帮助，也欢迎大家使用过程中提出意见和建议。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055f4481e8991b448dcce6