rsuite-checktreepicker-2 是一个 ReactJS 的组件，是用来实现多选树形选择器的，可以方便地在前端应用程序中进行数据筛选。在此篇文章中，我们将详细介绍如何使用 rsuite-checktreepicker-2。
安装
首先，需要使用 NPM 包管理器进行安装：
npm install rsuite-checktreepicker-2
成功安装后，在你项目的 package.json 中将看到以下添加的模块：
"rsuite-checktreepicker-2": "latest", "react": "^15.0.0", "react-dom": "^15.0.0",
可用的 Props 属性
data: 必需。一个数组，用于设置树形结构的数据。defaultValue: 一个选中节点的列表，如果你需要初始化选中列表的话就需要这个；onChange： 选择变化时的响应事件；searchText: 可选。为组件提供搜索功能所需的文本；expandAll: 可选。初始是否展开所有节点;onExpand: 可选。单击节点时的响应事件。
使用教程
1.先在你的项目代码中引入组件。
import CheckTreePicker from 'rsuite-checktreepicker-2';
2.定义一些数据，在这里我们将使用最简单的树形数据示例：
-- -------------------- ---- -------
----- ---- - --
-------- --------
-------- --------
----------- -
-
-------- --------
-------- --------
--
-
-------- ---------
-------- ---------
--
-
-------- -------
-------- ------
--
---3.设置组件的基本属性。
<CheckTreePicker
data={data}
defaultValue={['apple', 'orange']}
onChange={this.handleOnChange}
searchText="Search"
/>4.在你的应用程序中添加 onChange 事件处理程序函数。
handleOnChange(value, event) {
console.log('handleOnChange selectedValues:', value);
}5.渲染你的组件
-- -------------------- ---- -------
-------- -
------ -
-----
----------------
-----------
----------------------- ----------
------------------------------
-------------------
--
------
--
-至此，你已经可以使用 rsuite-checktreepicker-2 来构建一个树形多选菜单了，并且对其使用了常用方法。
示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------------- ---- ---------------------------
----- ---- - --
-------- --------
-------- --------
----------- -
-
-------- --------
-------- --------
--
-
-------- ---------
-------- ---------
--
-
-------- -------
-------- ------
--
---
----- ------------------- ------- --------- -
------------------ -
-------------
------------------- - -------------------------------
-
--------------------- ------ -
--------------------------- ----------------- -------
-
-------- -
------ -
-----
----------------
-----------
----------------------- ----------
------------------------------
--
------
--
-
-
------ ------- --------------------通过这个简单的示例，你可以构建你自己的多选树形选择器，并在你的应用程序中使用它。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd481e8991b448e6695