ReactJS UI Ant Design Cascader 组件
Ant Design Library 已经预先构建了这个组件,并且它也很容易集成。 Cascader 组件用作交流级联选择框。当用户需要从一组相关的数据集中进行选择时,使用该组件。我们可以在 ReactJS 中使用以下方法来使用 Ant Design Cascader 组件。
级联道具:
- allowClear:用于表示是否允许清除。
- autoFocus:如果设置为 true,则用于在安装组件时获取焦点。
- bordered:用于表示是否有边框样式。
- changeOnSelect:如果设置为 true,则用于更改每个选择的值。
- className:用于附加的 CSS 类。
- defaultValue:用于表示最初选择的值。
- disabled:用于表示是否禁用选择。
- displayRender:显示选中选项的渲染函数。
- dropdownRender:用于自定义下拉内容。
- expandIcon:用于自定义当前项展开图标。
- expandTrigger:用于在单击或悬停时扩展当前项,单击悬停之一。
- fieldNames:用于标签和值以及子项的自定义字段名称。
- getPopupContainer:选择器应呈现到的父节点。
- loadData:用于延迟加载选项。
- notFoundContent:用于指定在没有结果匹配时显示的内容。
- options:用于级联的数据选项。
- placeholder:用于表示输入占位符。
- popupClassName:用于弹出叠加层的附加类名。
- popupPlacement:用于预设弹出对齐方式。
- popupVisible:用于设置cascader popup的可见性
- showSearch:用于指示是否以单模式显示搜索输入。
- size:用于表示输入的大小。
- style:用于附加样式。
- suffixIcon:用于自定义后缀图标。
- value:用于表示选择的值。
- onChange:级联选择完成时触发的回调函数。
- onPopupVisibleChange:当弹出窗口显示或隐藏时触发的回调函数。
showSearch 道具:
- filter:作为参数传递给该函数的选项,如果该函数返回true,将被包含在过滤集中,否则将被排除。
- limit:用于设置过滤项的数量。
- matchInputWidth:用于表示列表的宽度是否与输入匹配。
- render:用于渲染过滤的选项。
- sort:用于对过滤后的选项进行排序。
方法:
- blur():该函数用于移除焦点。
- focus():该函数用于获取焦点。
创建 React 应用程序并安装模块:
第 1 步:使用以下命令创建一个 React 应用程序:
npx create-react-app foldername
第 2 步:创建项目文件夹(即文件夹名称)后,使用以下命令移动到该文件夹:
cd foldername
第 3 步:创建 ReactJS 应用程序后,安装 必需的 模块使用以下命令:
npm install antd
项目结构:它将如下所示。
示例:现在在App.js文件中写下以下代码。在这里,App 是我们编写代码的默认组件。
App.js
import React from 'react'
import "antd/dist/antd.css";
import { Cascader } from 'antd';
export default function App() {
return (
ReactJS Ant-Design Cascader Component
<>
{ console.log(data) }}
placeholder="Select destination" />
>
);
}
运行应用程序的步骤:从项目的根目录使用以下命令运行应用程序:
npm start
输出:现在打开浏览器并转到http://localhost:3000/ ,您将看到以下输出:
参考: https://ant.design/components/cascader/