React 是一个非常流行的 JavaScript 库，用于构建用户界面。它让开发者可以更轻松地创建交互式 UI 组件，实现复杂的业务逻辑。react-filtered-multiselect-yejioob 是一个基于 React 的多选过滤器组件，可以帮助开发者快速构建交互式UI界面。
react-filtered-multiselect-yejioob GitHub 地址
安装
npm install react-filtered-multiselect-yejioob --save
也可以直接通过 CDN 使用:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/react-filtered-multiselect-yejioob/dist/css/styles.min.css"/> <script src="https://cdn.jsdelivr.net/npm/react-filtered-multiselect-yejioob/dist/bundle.js"></script>
快速上手
在引入本组件前，请确保您已经引入了 React：
<script src="https://cdn.jsdelivr.net/npm/react@16.0.0/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
然后，你可以创建一个简单的 select 多选框：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- -------------------------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
-------- -
---- -- ------ --------------
---- -- ------ ----------
---- -- ------ --------
---- -- ------ --------
---- -- ------ ------
--
---------------- --
--
-
-------- -
------ -
------------
----------------------------
--------------------------------------------
------------------------
----------------------------
--------------------
--
--
-
---------------------- --------------
------------------------------- ---------------
-
------------------------ --------------
------------------------------- ---------------
-
-
------ ------- ----在这个示例中，我们定义了一个 Multiselect 组件，并向它传递了一些选项。我们还定义了 onSelect 和 onDeselect 事件，以便在选中或取消选中选项时更新组件的状态。
API
Options
options 是一个数组，其中包含所有可选项。每一项都应该具有一个 id 和一个 value 属性。示例：
[
{id: 1, value: 'JavaScript'},
{id: 2, value: 'Python'},
{id: 3, value: 'Java'},
{id: 4, value: 'Ruby'},
{id: 5, value: 'C++'}
]Selected Options
selectedOptions 是一个数组，其中包含所有选中的选项。默认为空数组。
[
{id: 1, value: 'JavaScript'},
{id: 2, value: 'Python'},
]onSelect
onSelect 是一个回调函数，它会在选中一个或多个选项时被调用。它有两个参数：
selectedList：一个数组，包含所有已选中的选项。selectedItem：最新选择的单个选项。
onSelect(selectedList, selectedItem){
//将选中的项添加到选中的列表中
}onDeselect
onDeselect 是一个回调函数，它会在取消选中一个或多个选项时被调用。它有两个参数：
selectedList：一个数组，包含所有已选中的选项。selectedItem：最新选择的单个选项。
onDeselect(selectedList, selectedItem){
//从选中的列表中删除取消选中的项
}Display Value
displayValue 是一个字符串，指定要显示在选项列表中的属性。默认为 value。
<Multiselect
...
displayValue="name"
/>总结
react-filtered-multiselect-yejioob 是一个非常方便的 React 组件，它可以帮助开发者快速构建多选过滤器组件。本文简单介绍了如何使用该组件，同时也给出了示例代码，可以供读者参考。希望本文对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005584381e8991b448d578f