简介
@beisen-cmps/checkbox-list 是一个适用于前端应用开发的 npm 包，它基于 React 实现了一组复选框组件，可以用于多选的列表场景中。本文将详细介绍如何使用 @beisen-cmps/checkbox-list，并提供样例代码，希望能够帮助读者更加方便、简单地使用该 npm 包完成开发工作。
安装
使用 npm 命令安装 @beisen-cmps/checkbox-list。
--- ------- --------------------------
快速上手
安装成功后，在项目的 JS 文件内通过 import 导入该组件，即可使用。
------ ------------ ---- -----------------------------
此时页面上就可以使用 CheckboxList 组件了。下面是一个基本的示例代码：
------ ----- ---- --------
------ ------------ ---- -----------------------------
----- ---- - -
-
------ ------
------ ---
--
-
------ ------
------ ----
--------- ----
--
-
------ ------
------ ---
--
-
------ ------
------ ---
--
-
-------- ---------------------------- -
-------------------- ----------------
-
------ ------- -------- ----- -
------ -
-------------
-----------
-----------------------
-----------------------
--
--
-在上述代码中，我们首先定义了一个数据源 data，其中每一项都包含 label 、value 和 disabled 三个属性。给组件传递了三个 props：data 表示数据源、name 表示该组件的名称，onChange 则是一个回调函数，当用户对复选框进行选择/取消选择操作时，该回调函数便会被调用，回调函数接收一个选中值的数组作为参数。
渲染出的页面如下图所示：
接 下 来，我 们 对 上 述 示 例 中 的 代 码 进 行 浅 显 的 解 释：
data数组定义了 CheckboxList 组件中的所有选项，每个选项都由{ label: string, value: string, disabled?: boolean }对象表示。其中，label 属性表示选项的文本内容，value 属性表示该选项的值（可以是任何类型的值），disabled 属性表示该选项是否禁用。handleChange函数定义了 CheckboxList 组件在值发生变化时所执行的回调函数。此处我们调用了console.log函数，以将用户所选的值输出至控制台。CheckboxList组件中分别传递了三个 props：
data表示要渲染的数据源，即由data数组中各个元素构成的选项列表。name表示该组件的名称。当CheckboxList被选中时，会生成一个值为当前选中项的数组，并将该数组封装成event对象，触发onChange操作。在event对象中，target.name属性值即为该CheckboxList组件的名称。onChange表示值变更时所触发的回调函数，由handleChange所实现。
API 文档
在上述示例中，我们了解了 @beisen-cmps/checkbox-list 的基本使用方法，并已经可以通过该组件实现一些基本的多选操作。下面，我们将对该组件的用法进行更加详细的介绍。
props
@beisen-cmps/checkbox-list 支持以下 props：
data
- 说明：必填。数据源，用于渲染 CheckboxList 中的选项列表，格式为一个对象数组，其中每个对象都需包含
label和value两个属性。如果不需要选项的某些项可选，则可以提供disabled属性。例如，如下代码声明的data数组：
----- ---- - -
-
------ ------
------ ---
--
-
------ ------
------ ----
--------- ----
--
-
------ ------
------ ---
--
-
------ ------
------ ---
--
--- 类型：array
name
说明：选填。组件名，用于区别不同组件之间的事件，一般情况下不需要填写，默认为 "checkbox-list"
类型：string
defaultValue
说明：选填。表示默认值，格式为一个由 value 值组成的数组。
类型：string[]
value
说明：选填。当前的状态值，格式为一个由 value 值组成的数组。
类型：string[]
disabled
说明：选填。当组件处于 disabled 状态时，用户无法对选项进行选择操作。
类型：boolean
checkboxTheme
说明：选填。表示复选框的样式，分为 blue 、 gray 、 white 三种。默认为 "blue"。
类型：string
方法
@beisen-cmps/checkbox-list 支持以下方法：
getValue
说明：获取当前 CheckBox 状态值，该值为一个由各选项 value 值组成的数组。
返回值：array
resetValue
说明：将 CheckBox 的状态值重置为 defaultValue 或空数组。
返回值：无
示例代码
下面是一个更加详细的示例代码，其中包含了更加复杂的数据源、更加丰富的属性设置以及更加细致的显示效果。读者可以根据自己的需求来调整该组件的样式和属性。
------ ----- ---- --------
------ ------------ ---- -----------------------------
----- ---- - -
-
------ -----
------ -----
--
-
------ -----
------ -----
--
-
------ -----
------ -----
--
-
------ -----
------ -----
--
-
------ -----
------ -----
--
-
------ -----
------ -----
--
-
------ ------
------ ------
--
-
------ -----
------ -----
-
--
------ ------- -------- ----- -
-------- ---------------------------- -
-------------------- ----------------
-
------ -
-------------
-----------
--------------------- ------ -------
-------------- -------
--------------------
-------------------------
-----------------------
--
--
--在上述代码中，我们首先定义了一个稍微复杂一些的数据源 data，它包含了八个元素，每个元素都有 label 和 value 两个属性。接着，我们定义一个 handleChange 回调函数，以便实现用户选择时的交互效果。最后，通过将 data 和若干其他的 props 注入到 <CheckboxList/> 组件中，我们就可以实现了一个多选的列表功能，并给它设置了默认值、复选框主题样式等参数，渲染出的组件如下图所示：
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedabefb5cbfe1ea06108d4