React 是一个非常流行的 JavaScript 库，用于构建用户界面。它让开发者可以更轻松地创建交互式 UI 组件，实现复杂的业务逻辑。react-filtered-multiselect-yejioob 是一个基于 React 的多选过滤器组件，可以帮助开发者快速构建交互式UI界面。
react-filtered-multiselect-yejioob GitHub 地址
安装
npm install react-filtered-multiselect-yejioob --save
也可以直接通过 CDN 使用:
----- ---------------- ------------------------------------------------------------------------------------------------ ------- ----------------------------------------------------------------------------------------------
快速上手
在引入本组件前，请确保您已经引入了 React：
------- ------------------------------------------------------------------------------------- ------- ---------------------------------------------------------------------------------------------
然后，你可以创建一个简单的 select 多选框：
------ ----- ---- --------
------ ----------- ---- -------------------------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
-------- -
---- -- ------ --------------
---- -- ------ ----------
---- -- ------ --------
---- -- ------ --------
---- -- ------ ------
--
---------------- --
--
-
-------- -
------ -
------------
----------------------------
--------------------------------------------
------------------------
----------------------------
--------------------
--
--
-
---------------------- --------------
------------------------------- ---------------
-
------------------------ --------------
------------------------------- ---------------
-
-
------ ------- ----在这个示例中，我们定义了一个 Multiselect 组件，并向它传递了一些选项。我们还定义了 onSelect 和 onDeselect 事件，以便在选中或取消选中选项时更新组件的状态。
API
Options
options 是一个数组，其中包含所有可选项。每一项都应该具有一个 id 和一个 value 属性。示例：
-
---- -- ------ --------------
---- -- ------ ----------
---- -- ------ --------
---- -- ------ --------
---- -- ------ ------
-Selected Options
selectedOptions 是一个数组，其中包含所有选中的选项。默认为空数组。
-
---- -- ------ --------------
---- -- ------ ----------
-onSelect
onSelect 是一个回调函数，它会在选中一个或多个选项时被调用。它有两个参数：
selectedList：一个数组，包含所有已选中的选项。selectedItem：最新选择的单个选项。
---------------------- -------------- ---------------- -
onDeselect
onDeselect 是一个回调函数，它会在取消选中一个或多个选项时被调用。它有两个参数：
selectedList：一个数组，包含所有已选中的选项。selectedItem：最新选择的单个选项。
------------------------ -------------- ----------------- -
Display Value
displayValue 是一个字符串，指定要显示在选项列表中的属性。默认为 value。
------------
---
-------------------
--总结
react-filtered-multiselect-yejioob 是一个非常方便的 React 组件，它可以帮助开发者快速构建多选过滤器组件。本文简单介绍了如何使用该组件，同时也给出了示例代码，可以供读者参考。希望本文对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005584381e8991b448d578f