简介
react-fuzzy 是一种用于 React.js 应用程序的模糊搜索组件，它使用户可以快速搜索和选择合适的选项。它支持键入的搜索、下拉列表、多选和单选模式。
安装
react-fuzzy 可以通过 npm 安装：
--- ------- -----------
或者 yarn 安装：
---- --- -----------
用法
使用 react-fuzzy 的基本步骤如下：
- 导入 react-fuzzy：
------ ----------- ---- --------------
- 在组件中设置 initialState：
----- ------------- --------------- - ------------- ----- --------- ----------- - ---------- - ------ ------- -- - ------ -------- -- - ------ ------------ -- ---
- 渲染组件：
------------ ---------------- ------------------- ----------------- ------------ ------ -- -- ----------------------------- -------------------- -- ---------------------- --
在这个例子中，我们设置了搜索标签键（labelKey）、搜索值、选项（options）、搜索值的 onChange 和选择 onSelect 处理函数。
- 根据需要设置其他属性：
------------ ---------------- ------------------- ----------------- ------------ ------ -- -- ----------------------------- -------------------- -- ---------------------- ------------------- ------- ------------- ---------------- --
在这个例子中，我们设置了占位符、在按下 Esc 时清除搜索值和关闭多选模式。
高级用法
react-fuzzy 支持使用筛选器和自定义渲染器进行更高级的用法。筛选器允许你完全控制搜索结果，可以基于自己的逻辑提供筛选条件。
自定义渲染器允许你通过自己的 JSX 返回函数来完全控制渲染组件。
筛选器
要使用筛选器，可以在 useState 中配置 initialState：
----- ------------- --------------- - ------------- ----- --------- ----------- - ---------- - ------ -------- ----- ------- -- - ------ --------- ----- ------- -- - ------ ------------- ----- ------- -- - ------ --------- ----- ----------- -- - ------ ----------- ----- ----------- -- - ------ -------- ----- ----------- -- --- ----- --------------- ----------------- - -------------
在 render 中设置筛选器条件：
----- ---------- - ------ -- --------- --- ------- -- ----------------------------------- ------------ -- - --------------------------------------------- -- --------- --------------
在 FuzzySearch 组件中使用 filterOptions 而不是 options：
------------ ---------------- ------------------- ----------------------- ------------ ------ -- -- ----------------------------- -------------------- -- ---------------------- ------------------- ------- --
自定义渲染器
要使用自定义渲染器，可以包装 FuzzySearch 组件并传入函数来替换默认的渲染器：
------ ------------ - ------------ - ---- --------------
----- -------------- - --
--------
---------
--------------
-----------------
-- -- -
--
--------------------- -- -
----
------------------
------------------ -------------------------------- -- -------------
----------- -- ---------------------------
-
--------------
------
---
---
--
----- ----- - -- -- -
----- ------------- --------------- - -------------
----- --------- ----------- - ----------
- ------ -------- ----- ------- --
- ------ --------- ----- ------- --
- ------ ------------- ----- ------- --
- ------ --------- ----- ----------- --
- ------ ----------- ----- ----------- --
- ------ -------- ----- ----------- --
---
------ -
------------
----------------
-------------------
-----------------
------------ ------ -- -- -----------------------------
-------------------- -- ----------------------
------------------- -------
-
----------------
--------------
--
--在这个例子中，我们用自定义渲染器函数 CustomRenderer 替换了默认渲染器。它接受一个对象，其中包含选项、onSelect 处理函数、selectedItems（多选模式用）和 setSelectedItems（多选模式用）。
示例代码
使用 ESM 语法的示例代码如下：
------ ------ - ---------- -------- - ---- --------
------ ----------- ---- --------------
----- -------------- - --
--------
---------
--------------
-----------------
-- -- -
--
--------------------- -- -
----
------------------
------------------ -------------------------------- -- -------------
----------- -- ---------------------------
-
--------------
------
---
---
--
----- --- - -- -- -
----- ------------- --------------- - -------------
----- --------- ----------- - ----------
- ------ -------- ----- ------- --
- ------ --------- ----- ------- --
- ------ ------------- ----- ------- --
- ------ --------- ----- ----------- --
- ------ ----------- ----- ----------- --
- ------ -------- ----- ----------- --
---
----- --------------- ----------------- - -------------
----- --------------- ----------------- - -------------
----- ---------- - ------ --
--------- --- ------- -- -----------------------------------
------------ -- -
---------------------------------------------
-- --------- --------------
------ -
---- ----------------
------------
----------------
-------------------
-----------------------
------------ ------ -- -- -----------------------------
-------------------- -- -----------------------------
------------------- -------
---------------
--
------------
----------------
-------------------
-----------------
------------ ------ -- -- -----------------------------
-------------------- -- ----------------------
------------------- -------
--
------------
----------------
-------------------
-----------------
------------ ------ -- -- -----------------------------
-------------------- -- ----------------------
------------------- -------
-
----------------
--------------
------
--
--
------ ------- ----使用 CommonJS 语法的示例代码如下：
----- ----- - -----------------
----- - ---------- -------- - - ------
----- ----------- - -------------------------------
----- -------------- - --
--------
---------
--------------
-----------------
-- -- -
--
--------------------- -- -
----
------------------
------------------ -------------------------------- -- -------------
----------- -- ---------------------------
-
--------------
------
---
---
--
----- --- - -- -- -
----- ------------- --------------- - -------------
----- --------- ----------- - ----------
- ------ -------- ----- ------- --
- ------ --------- ----- ------- --
- ------ ------------- ----- ------- --
- ------ --------- ----- ----------- --
- ------ ----------- ----- ----------- --
- ------ -------- ----- ----------- --
---
----- --------------- ----------------- - -------------
----- --------------- ----------------- - -------------
----- ---------- - ------ --
--------- --- ------- -- -----------------------------------
------------ -- -
---------------------------------------------
-- --------- --------------
------ -
---- ----------------
------------
----------------
-------------------
-----------------------
------------ ------ -- -- -----------------------------
-------------------- -- -----------------------------
------------------- -------
---------------
--
------------
----------------
-------------------
-----------------
------------ ------ -- -- -----------------------------
-------------------- -- ----------------------
------------------- -------
--
------------
----------------
-------------------
-----------------
------------ ------ -- -- -----------------------------
-------------------- -- ----------------------
------------------- -------
-
----------------
--------------
------
--
--
-------------- - ----总结
react-fuzzy 是一个非常有用的组件，可以使用户能够快速地搜索和选择合适的选项。它具有许多高级用法，如筛选器和自定义渲染器，这些用法可以使你完全控制搜索结果和渲染结果。希望这篇文章对你学习 react-fuzzy 有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/react-fuzzy