什么是 rc-cascader
rc-cascader 是一个 React 组件，它提供了一个级联选择器，可以用于选择嵌套的选项。它支持传入选项数据，并提供了各种配置项，以满足不同场景下的需求。
安装
可以使用 npm 进行安装：
npm install rc-cascader
如果你使用 yarn，可以使用以下命令进行安装：
yarn add rc-cascader
使用
使用 rc-cascader 需要传入选项数据和配置对象，示例代码如下：
-- -------------------- ---- -------
------ -------- ---- --------------
----- ------- - -
-
------ ----
------ ----------
--------- -
-
------ ------
------ ------------
--
-
------ ------
------ ------------
--
--
--
-
------ ----
------ ----------
--------- -
-
------ ------
------ ------------
--
--
--
--
-------- ------------- -
------ -
---------
-----------------
----------------- -- -------------------
------------------- -------
--
--
-上面的代码中，我们传入了一个 options 数组，它包含了两个顶级选项，每个顶级选项下又包含了两个子选项。我们指定了 onChange 回调函数，每次选项发生变化时就会触发这个函数。我们同时指定了一个 placeholder 属性，它会在选择器未选中任何选项时显示。运行上面的代码，你会看到下图所示的级联选择器：
当你选择了一个选项时，会调用 onChange 回调函数并传入选中的值。例如，选择了 "Option1-2"，就会输出以下信息：
["1", "1-2"]
配置项
rc-cascader 提供了丰富的配置项，以满足不同场景下的需求。常用配置项如下：
| 属性名 | 类型 | 必填 | 描述 |
|---|---|---|---|
| options | array | 是 | 选项数组 |
| onChange | function | 否 | 选项变化时的回调函数 |
| value | array | 否 | 当前选中的值 |
| defaultValue | array | 否 | 默认选中的值 |
| placeholder | string | 否 | 未选中任何选项时的提示信息 |
| disabled | boolean | 否 | 是否禁用 |
| allowClear | boolean | 否 | 是否允许清空选项 |
| expandTrigger | string | 否 | 触发展开子选项的方式。可选值：'click', 'hover' |
| displayRender | function | 否 | 自定义文本显示函数 |
| showSearch | boolean | 否 | 是否显示搜索框 |
| filterOption | function | 否 | 搜索选项的过滤函数 |
| loadData | function | 否 | 加载子选项异步数据的函数 |
下面介绍其中一些常用的配置项。
allowClear
allowClear 表示是否允许清空选项。如果设置为 true，会在选择器右侧显示一个清空按钮。例如：
<Cascader options={options} allowClear />value 和 defaultValue
value 和 defaultValue 表示当前选中的值。value 是受控属性，需要与 onChange 配合使用。defaultValue 是非受控属性，可以用于在组件挂载时指定默认选中的值。例如：
<Cascader options={options} value={["1", "1-2"]} />loadData
loadData 是用于加载子选项异步数据的函数，它的签名如下：
function(value: string, selectedOptions: array) => void
在用户选择一个选项时，如果该选项有子选项且未加载，则会调用 loadData 函数加载子选项数据。其中，value 是选择的选项值，selectedOptions 是已经选择的选项数组。例如：
-- -------------------- ---- -------
-------- ------------------ ---------------- -
----- ------------ - -------------------------------------- - ---
-------------------- - ----- -- ------
-- ---- ------ ------
------------- -- -
--------------------- - -
-
------ -------------
------ -------------
--
-
------ -------------
------ -------------
--
--
-------------------- - ------
-------------------------
-- ------
-
--------- ----------------- ---------------------- --上面的代码中，定义了一个 loadOptions 函数，它通过 setTimeout 模拟了异步加载，加载完成后会更新组件的 options 状态。
总结
rc-cascader 是一个方便易用的 React 组件，它可以帮助我们实现嵌套选项的级联选择。本文介绍了如何安装和使用 rc-cascader，以及常用的配置项。希望本文对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/162564