随着社交网络的发展,@提及功能已经成为了现代应用中不可或缺的一部分。如果你想在你的 React 应用中实现这个功能,你可以使用 npm 包 @mcallistersean/react-githubish-mentions。这个包提供了 GitHub 风格的 @提及功能,可以轻松地集成到你的应用中。
安装和引入
首先,你需要使用 npm 安装该包:
--- ------- ----------------------------------------
接着,在你的 JS 文件中引入这个包:
------ ------------- ---- -------------------------------------------
基本用法
在你的 React 组件中,你可以使用 组件来实现 @提及功能。
------ ------ - -------- - ---- -------- ------ ------------- ---- ------------------------------------------- -------- ------------- - ----- ------- --------- - ------------- -------- ------------------- --------- - ------------------- - ------ - -------------- ------------- ----------------------- -- -- -
这样,当用户输入 "@" 并开始输入用户名时,该组件将在下拉框中展示可能的匹配项。
属性列表
MentionsInput 组件支持以下属性:
属性名 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
value | string | 是 | 无 | 输入框的值 |
onChange | function | 是 | 无 | 值改变时的回调函数 |
placeholder | string | 否 | '@' | 输入框中默认提示文本 |
displayTransform | function | 否 | 无 | 显示在输入框中的文本变换函数 |
markup | string | 否 | @[__display__](__id__) |
生成的标记格式 |
trigger | string | 否 | '@' | 触发匹配的字符 |
data | array | 是 | 无 | 可用于匹配的数据数组 |
value
输入框的值。
-------------- ------------- -------- ----------------------- --
onChange
值改变时的回调函数。
-------- ------------------- --------- - -- ---------- - -------------- ------------- ----------------------- --
placeholder
输入框中默认提示文本。
-------------- -------------------- ------------- ----------------------- --
displayTransform
显示在输入框中的文本变换函数。
-------- ------------------------ -------- - ------ -------------- - -------------- --------------------------------------- ------------- ----------------------- --
markup
生成的标记格式。
-------------- ------------------------------ ------------- ----------------------- --
trigger
触发匹配的字符。
-------------- ----------- ------------- ----------------------- --
data
可用于匹配的数据数组。
----- ----- - - - --- -- ----- ------- -- - --- -- ----- ----- -- - --- -- ----- --------- -- -- -------------- ------------ ------------- ----------------------- --
示例代码
下面是一个使用 @mcallistersean/react-githubish-mentions 包的示例代码:
------ ------ - -------- - ---- -------- ------ ------------- ---- ------------------------------------------- ----- ----- - - - --- -- ----- ------- -- - --- -- ----- ----- -- - --- -- ----- --------- -- -- -------- ------------------------ -------- - ------ -------------- - -------- ------------- - ----- ------- --------- - ------------- -------- ------------------- --------- - ------------------- - ------ - -------------- ------------------------------ ----------- -------------------- --------------------------------------- ------------ ------------- ----------------------- -- -- - ------ ------- ------------
这个组件将自动匹配用户列表中的用户名,并将它们显示为链接格式。你也可以在 displayTransform 函数中定义自己的格式化规则,或者修改 markup 的格式来自定义标记格式。
总结
@mcallistersean/react-githubish-mentions 包提供了一个快速的方式来实现常见的 @提及功能。通过使用这个包,你可以轻松地在你的 React 应用中实现这个功能,并可以根据你的需求自定义格式和匹配规则。当你需要在你的应用中实现 @提及功能时,这个包值得你的一试。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562dd81e8991b448e0528