简介
@celebryts/react-autocomplete-tags 是一个基于 React 的前端组件，它提供了一个可定制化的标签自动完成组件。
该组件通过输入框让用户输入标签，并实时进行标签建议，同时支持自定义标签的添加和删除。它可以轻松增加交互性和可访问性，将用户输入和数据联结在一起。
安装
安装 @celebryts/react-autocomplete-tags 很简单，只需在终端中运行以下命令：
npm install --save @celebryts/react-autocomplete-tags
使用
@celebryts/react-autocomplete-tags 提供了很多参数和事件，可以通过传入不同的值进行个性化定制。
在使用之前，确保已经安装了 React，并且已经引入了需要使用的库。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ---------------- ---- -------------------------------------
------ ---------------------------------------------------- -- ------
----- --- - -- -- -
----- ------ -------- - --------------------- ----- -------
----- ------------ - --- ------- -- -
----------------
--
------ -
-----------------
------------------
--------------- ----- ----- ------
------------
-----------------------
--
--
--
-------------------- --- ---------------------------------上面的代码中，我们首先通过 useState 钩子函数声明了一组状态，用来存储当前选择的标签。然后我们定义了一个 handleChange 函数，用来更新标签的状态。
在 App 组件中，我们将 AutocompleteTags 组件作为子组件传入，设置了 placeholder 属性为 “输入标签”，options 属性为推荐的标签选项，value 属性为当前选中的标签，onChange 属性为选择标签后触发的回调函数。
参数
AutocompleteTags 接受多个属性，包括：
options
类型: Array
默认值: []
要显示的选项的数组。每个选项可以是一个字符串或一个对象。
如果选项是一个字符串，则该字符串将同时用作选项的值和标签。如果选项是一个对象，则必须包含两个属性，label 属性表示选项的标签，value 属性表示选项的值。
getOptionLabel
类型: Function
默认值: (option) => option.label || String(option)
该函数用于生成每个选项的标签文本。当选项是一个对象时，它将接受选项作为参数，并应该返回一个字符串，包含要显示的标签的文本。默认情况下，选项的 label 属性或 单独的字符串 将用作标签。
renderOption
类型: Function
默认值: (option) => String(option.label || option)
该函数用于自定义每个选项的渲染方式。当你需要渲染选项的方式与默认方式不同，比如渲染一个带有子元素的复杂组件时，可以使用该函数。它将接受选项作为参数，并应该返回一个 React 元素，用于渲染该选项。
renderInput
类型: Function
默认值: (props) => <input {...props} />
用于自定义输入框的渲染方式，该函数接受 props 作为参数，并返回一个 React 元素，通常是一个 input 元素。可以使用它定制化输入框样式，添加自定义功能等。
value
类型: Array
默认值: []
当前选择的标签的数组。每个标签可以是字符串或对象。
如果标签是一个字符串，则该字符串将同时用作标签的值和文本。如果标签是一个对象，则必须包含两个属性，label 属性表示标签的标签，value 属性表示标签的值。
onChange
类型: Function
默认值: undefined
当用户更改其选择的标签时触发的回调函数。
getOptionDisabled
类型: Function
默认值: undefined
设置选项是否可用的函数，当一个选项不可用时，该函数将返回 true。
multiple
类型: Bool
默认值: true
当设置为 true 时，用户可以选择多个标签。否则只能选择一个标签。
disabled
类型: Bool
默认值: false
当设置为 true 时，输入框将变成灰色，不能输入或选择任何选项。
placeholder
类型: String
默认值: ''
当没有选择任何标签时，将在输入框中显示的文本。
freeSolo
类型: Bool
默认值: false
当设置为 true 时，用户可以自由输入新的标签，而不仅仅是从选项列表中选择。默认情况下，只能从选项列表中选择标签。
limitTags
类型: Number
默认值: -1
介于 0 和选项数组长度之间的数字。用于限制用户可以选择的标签的数量。当此值为 0 时，不允许用户选择标签。
renderTags
类型: Function
默认值: (value, getTagProps) => value.map((option, index) => <div key={index} {...getTagProps({ index })} />)
用于自定义标签的呈现方式，当您需要呈现标签的方式不同于默认方式时，可以使用该函数。它将接受标签数组作为参数，并应该返回一个 React 元素数组，用于呈现选中的标签。
事件
AutocompleteTags 还提供了一些事件，用于与组件交互。这些事件包括：
onFocus
当输入框获得焦点时，触发此事件。
onBlur
当输入框失去焦点时，触发此事件。
onKeyDown
当用户按下任何键时，触发此事件。您可以使用该事件处理键盘事件，并在必要时对输入框进行操作。
onKeyUp
当用户释放任何键时，触发此事件。
示例
下面是一个完整的示例，它使用了多个参数和事件来自定义细节。该代码将使用默认值。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ---------------- ---- -------------------------------------
------ ---------------------------------------------------- -- ------
----- --- - -- -- -
----- ------ -------- - -------------------
----- ------------ - --- ------- -- -
----------------
--
----- ----------- - ------- ------- -- -
----------------------------- ----------
-
----- ---------- - ------- ------- -- -
----------------------------- ----------
-
----- -------------- - ------- -- -
--------------------- ----- --------- -- -----------
--
----- ----------- - ------- -- -
------------------ ----- --------- -- -----------
--
------ -
-----------------
------------------
--------------- ----- ----- ------
------------
-----------------------
---------------------
-------------------
---------------------------
---------------------
-------------
----------------
--
--
--
-------------------- --- ---------------------------------结论
@celebryts/react-autocomplete-tags 是一个非常有用的组件，它可以轻松地将标签自动补全集成到网站中，增加了交互性和可访问性，还具有很高的可定制性。
这篇文章介绍了如何安装和使用 @celebryts/react-autocomplete-tags 组件，并详细说明了其各个参数和事件。希望这可以帮助你在你的项目中使用这个组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057aed81e8991b448eb70a