介绍
react-multiselect-checkboxes 是一个基于 React 的多选框组件，主要应用于表单筛选等场景。它是一个 npm 包，通过 npm 安装后，可以快速构建一个带多选框的筛选器。
安装
在使用 react-multiselect-checkboxes 之前，你需要先安装 React 和 ReactDOM。
通过 npm 安装
可以通过 npm 进行安装：
npm install react-multiselect-checkboxes --save
直接下载
也可以直接下载 react-multiselect-checkboxes 的源代码。
使用
参数说明
react-multiselect-checkboxes 接受以下参数：
| 参数 | 必填 | 说明 |
|---|---|---|
| options | 是 | 选择框列表，包含 label 和 value 两个属性。 |
| defaultSelected | 否 | 默认选中的选项，可以是单个选项的 value，也可以是多个 value 的数组。 |
| onChange | 否 | 选项更改时的回调函数，返回一个选项值数组。 |
| placeholder | 否 | 未选择任何选项时的提示文字。 |
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------------- ---- -------------------------------
----- ------- - -
- ------ -------- ------ ---- --
- ------ --------- ------ ---- --
- ------ --------- ------ ---- --
- ------ ------------- ------ ---- --
- ------ ------- ------ ---- -
--
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
--------- --------- -------
--
-
---------------------- -
--------------- -------- ---
-
-------- -
------ -
----------------------
-----------------
-------------------------------------
---------------------------------------
--------------------
--
--
-
-
------ ------- --------注意事项
- options 是一个数组，每个元素都是一个对象，包含两个属性：value 和 label。
- defaultSelected 是可选的，如果传递了该属性，则会默认选中 value 为 defaultSelected 的选项。
- onChange 是选项变更时的回调函数，会传回一个选中的值数组，可以在回调函数中进行相关处理。
- placeholder 是可选的，如果未选中任何选项，会显示 placeholder 中的文字提示。
指导意义
使用 react-multiselect-checkboxes 可以快速构建一个带多选框的表单筛选器，可以应用于商品、用户、订单等管理系统的数据筛选功能中。
同时，在开发自己的组件时，可以参考 react-multiselect-checkboxes 的实现思路，将其运用到自己的组件中。这可以提高自己的组件开发效率，也能增加自己的编码经验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f7d9381d61a3540f20