前言
在前端开发中，级联选择器（cascade）是一个经常使用的控件，它允许用户通过选择一个选项来改变另外一个或多个选项。d_cascader 是一个很棒的基于 React 的级联选择器控件，它可以很方便地集成到你的项目中。在本文中，我们将介绍 d_cascader 的使用方法，并提供一些有帮助的示例代码。
安装
在使用 d_cascader 前，需要先安装相关依赖。使用 npm 可以轻松地安装 d_cascader：
npm install d_cascader --save
起步
下面是一个示例，演示如何使用 d_cascader：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------
----- ------- - -
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
-
------ ------
------ ------
--
--
--
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
-
------ ------
------ ------
--
--
--
--
--
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
-
------ ------
------ ------
--
--
--
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
--
--
--
--
--
----- --- ------- --------------- -
-------- - ------- ---------------- -- -
------------------ -----------------
--
-------- -
------ -
--------- ----------------- ------------------------ ----------------- --
--
-
-
------ ------- ----Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| options | 级联选择器的选项 | Array<{ value: string, label: string, children: Array }> | [] |
| defaultValue | 指定默认选中的条目 | Array<string> | [] |
| value | 指定当前选中的条目 | Array<string> | [] |
| onChange | 选中 option 时的回调 | (value, selectedOptions) => void | - |
| onPopupVisibleChange | 下拉框状态改变时的回调 | (visible) => void | - |
| placeholder | 输入框的占位文本 | string | '' |
| disabled | 是否禁用 | boolean | false |
| allowClear | 是否支持清除 | boolean | true |
| popupPlacement | 渲染弹出层的位置 | string (可选值："bottomLeft", "bottomRight", "topLeft", "topRight") | 'bottomLeft' |
| popupClassName | 弹出层类名 | string | - |
| popupContainer | 弹出层渲染容器 | () => Element | - |
示例
自定义渲染选项
d_cascader 允许你自定义渲染选项。下面的示例将自定义渲染每个选项的样式和标签：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------
----- ------- - -
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
-
------ ------
------ ------
--
--
--
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
-
------ ------
------ ------
--
--
--
--
--
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
-
------ ------
------ ------
--
--
--
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
--
--
--
--
--
----- --- ------- --------------- -
---------- - -------- ------- -- -
------ -
---- ---------------------------
----- -------- ------------ - --------------------------------
----- -------- ----------- --- ---
----------------- - ---------------------- - ---
-------
------
--
--
-------- -
------ -
--------- ----------------- ---------------------------- ----------------- --
--
-
-
------ ------- ----禁用选项
你可以在选项中将某些条目禁用。下面的示例演示了如何禁用 "鼓楼区" 选项：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------
----- ------- - -
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
-
------ ------
------ ------
--
--
--
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
-
------ ------
------ ------
--
--
--
--
--
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
-
------ ------
------ ------
--------- -----
--
--
--
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
--
--
--
--
--
----- --- ------- --------------- -
-------- - ------- ---------------- -- -
------------------ -----------------
--
-------- -
------ -
--------- ----------------- ------------------------ ----------------- --
--
-
-
------ ------- ----受控选择器
你可以使用控制 value 属性，使级联选择器成为受控组件。下面的示例演示了如何将选择器设置为受控组件，并在 onChange 中更新 value 的值:
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------
----- ------- - -
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
-
------ ------
------ ------
--
--
--
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
-
------ ------
------ ------
--
--
--
--
--
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
-
------ ------
------ ------
--
--
--
-
------ ------
------ ------
--------- -
-
------ ------
------ ------
--
--
--
--
--
--
----- --- ------- --------------- -
----- - -
------ ---
--
-------- - ------- ---------------- -- -
------------------ -----------------
--------------- ----- ---
--
-------- -
----- - ----- - - -----------
------ -
---------
-------------
-----------------
------------------------
-----------------
--
--
-
-
------ ------- ----结论
在本文中，我们介绍了 d_cascader 的安装和使用方法，以及如何自定义渲染选项，禁用选项和使用受控选择器。希望本文能对你掌握 d_cascader 好的使用方法有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd081e8991b448dd5d0