尧图网站建设 
Ant Design Cascader 级联选择器 defaultValue 默认值使用指南【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design级联选择Cascader是 Ant Design 表单类组件中处理省市区、公司层级、事物分类等多级联动数据的核心控件。本篇文章以官方 Demo 默认值 为骨架结合 组件实现源码 与 API 文档系统讲解defaultValue的数组传值方式、与value受控的取舍、选中回显与onChange回调的联动机制并给出省市区三级联动的完整可运行示例帮助你掌握级联选择器默认值的正确用法。默认值的基本概念通过数组指定Cascader 的选中值不是单个字符串而是一组从根节点到叶子节点的value路径数组。与之对应defaultValue也要求以数组形式传入数组中的每一项依次对应级联树的每一层。官方文档 默认值 给出的说明只有一句话默认值通过数组的方式指定但这一句话背后包含两个关键点类型必须是数组array即使只选中一个顶层选项也要写成[zhejiang]而不是zhejiang。数组顺序必须与层级一致第 0 项对应第一级选项第 1 项对应第二级选项以此类推。在 API 文档 中defaultValue的类型标注为array默认值为[]即默认不选中任何项与value指定选中项受控的唯一区别在于defaultValue只在组件首次挂载时生效后续不随 props 变化而更新。省市区三级联动完整示例以下是默认值 Demo 的完整代码见 default-value.md它演示了在省、市、区三层数据结构下指定默认选中浙江 / 杭州 / 西湖import { Cascader } from antd; const options [{ value: zhejiang, label: 浙江, children: [{ value: hangzhou, label: 杭州, children: [{ value: xihu, label: 西湖, }], }], }, { value: jiangsu, label: 江苏, children: [{ value: nanjing, label: 南京, children: [{ value: zhonghuamen, label: 中华门, }], }], }]; function onChange(value) { console.log(value); } ReactDOM.render( Cascader defaultValue{[zhejiang, hangzhou, xihu]} options{options} onChange{onChange} / , mountNode);代码要点拆解1. 数据结构options每个节点必须包含value选项值与label展示文本两个字段children数组承载子级。这里构造了两个省浙江、江苏各带两级子节点的标准树形结构。2. 默认值路径[zhejiang, hangzhou, xihu]第 0 项zhejiang匹配第一级选项浙江第 1 项hangzhou在浙江的children中匹配杭州第 2 项xihu在杭州的children中匹配西湖三条路径全部命中组件初始即回显为浙江 / 杭州 / 西湖。3.onChange(value)回调用户重新选择后回调参数value同样是路径数组例如选择江苏 / 南京 / 中华门时输出[jiangsu, nanjing, zhonghuamen]。注意事项defaultValue必须与options中已有的value完全对应。如果传入的路径在options中找不到匹配节点从源码实现见下文回显原理可知该路径对应的层级将无法映射出label回显文本会缺失对应部分。defaultValue只用于初始态组件挂载后通过用户交互改变的选择值不会反向同步到defaultValue属性如需在外部控制并随时重置选中值应改用受控的value属性。defaultValue 与 value非受控与受控的选择从 组件实现源码 可以清晰看到defaultValue与value在内部的定位constructor(props) { super(props); this.state { value: props.value || props.defaultValue || [], popupVisible: false, }; } componentWillReceiveProps(nextProps) { if (value in nextProps) { this.setState({ value: nextProps.value || [] }); } }两点源码事实挂载阶段state 中的value取props.value若未传则回退到props.defaultValue再没有则回退到空数组[]。也就是说defaultValue本质上是为非受控场景提供的初始值入口最终都会统一收敛到内部 state。更新阶段componentWillReceiveProps中通过value in nextProps判断——只有父组件显式传入value属性即受控模式时外部变化才会强制覆盖内部 state非受控模式下defaultValue不会参与后续更新。因此选择原则是场景推荐属性仅需设置初始选中项之后交给用户自由选择如表单默认值defaultValue需要外部状态驱动、或需要程序化重置/回填选中值valueonChange受控模式默认值的回显原理getLabel 与 array-tree-filter选中路径数组是如何变成输入框中浙江 / 杭州 / 西湖这种展示文本的答案在 getLabel 方法getLabel() { const { options, displayRender } this.props; const label arrayTreeFilter(options, (o, level) o.value this.state.value[level]) .map(o o.label); return displayRender(label); }其底层依赖array-tree-filter工具见 package.json 中声明的依赖array-tree-filter: ~1.0.0该工具沿着options树逐层过滤第level层只保留o.value value[level]的节点最终收集出从根到叶子的一条节点链再map成label数组。得到label数组后交给displayRender渲染函数拼接。默认渲染函数定义在 index.jsx 的 defaultPropsdisplayRender(label) { return label.join( / ); }即默认以 / 分隔多级文案。这也是为什么defaultValue数组必须逐层精确匹配value——任何一层失配都会让arrayTreeFilter在对应层找不到节点回显文案随之缺层。自定义回显若想改变回显格式可覆盖displayRender。例如 hover.md Demo 中只展示最后一项function displayRender(label) { return label[label.length - 1]; }此时无论选了几级输入框都只显示叶子节点的 label如西湖而内部value仍然是完整路径数组。默认值与相关交互配置defaultValue只是初始态组件其余交互属性决定了用户后续如何改变这个值两者配合使用才能完整理解级联选择器expandTrigger次级菜单展开方式click默认或hover见 hover.md 的expandTriggerhover用法。changeOnSelect设为true时点选任意一级即触发onChange允许只选中父级选项如只选浙江见 change-on-select.md。当该项为true时defaultValue也可以传入只到中间层的短路径例如[zhejiang, hangzhou]。allowClear是否显示清除按钮默认true。清除操作在 clearSelection 方法 中实现调用setValue([])将选中值置为空数组输入框随之清空defaultValue不会重新生效。disabled整体禁用单个选项禁用则需在options对应节点上加disabled: true字段见 disabled-option.md。placeholder未选中任何项时的占位文本默认请选择见 defaultProps。在表单场景中的推荐用法在真实的表单提交场景中级联选择的结果通常需要回填到表单数据中。推荐做法表单初始数据用defaultValue赋值一次提交时通过onChange拿到用户最新选择的路径数组。例如Cascader defaultValue{[zhejiang, hangzhou, xihu]} options{options} onChange{(value) { // value 形如 [jiangsu, nanjing, zhonghuamen] formData.region value; }} /如果需要联动重置比如切换省份后清空市、区则应改用受控模式用value属性驱动组件状态配合onChange在外部维护选中路径实现更精细的交互控制。小结defaultValue通过数组指定初始选中项数组元素按层级顺序对应options中从根到叶的value路径它只在组件首次挂载时生效是典型的非受控初始值需要外部控制选中态时改用value选中回显依赖array-tree-filter逐层匹配 label再由displayRender默认以 / 连接渲染因此路径必须与options完全对应与expandTrigger、changeOnSelect、allowClear、disabled等交互配置组合使用可覆盖省市区选择、只选父级、移入展开等常见业务场景。更多用法可参考官方示例 基本用法、移入展开、选择即改变 与 禁用选项完整 API 参数表见 Cascader 组件文档底层实现细节可查阅 index.jsx 与样式文件 cascader.less。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Ant Design Cascader 级联选择器 defaultValue 默认值使用指南
Ant Design Cascader 级联选择器 defaultValue 默认值使用指南【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design级联选择Cascader是 Ant Design 表单类组件中处理省市区、公司层级、事物分类等多级联动数据的核心控件。本篇文章以官方 Demo 默认值 为骨架结合 组件实现源码 与 API 文档系统讲解defaultValue的数组传值方式、与value受控的取舍、选中回显与onChange回调的联动机制并给出省市区三级联动的完整可运行示例帮助你掌握级联选择器默认值的正确用法。默认值的基本概念通过数组指定Cascader 的选中值不是单个字符串而是一组从根节点到叶子节点的value路径数组。与之对应defaultValue也要求以数组形式传入数组中的每一项依次对应级联树的每一层。官方文档 默认值 给出的说明只有一句话默认值通过数组的方式指定但这一句话背后包含两个关键点类型必须是数组array即使只选中一个顶层选项也要写成[zhejiang]而不是zhejiang。数组顺序必须与层级一致第 0 项对应第一级选项第 1 项对应第二级选项以此类推。在 API 文档 中defaultValue的类型标注为array默认值为[]即默认不选中任何项与value指定选中项受控的唯一区别在于defaultValue只在组件首次挂载时生效后续不随 props 变化而更新。省市区三级联动完整示例以下是默认值 Demo 的完整代码见 default-value.md它演示了在省、市、区三层数据结构下指定默认选中浙江 / 杭州 / 西湖import { Cascader } from antd; const options [{ value: zhejiang, label: 浙江, children: [{ value: hangzhou, label: 杭州, children: [{ value: xihu, label: 西湖, }], }], }, { value: jiangsu, label: 江苏, children: [{ value: nanjing, label: 南京, children: [{ value: zhonghuamen, label: 中华门, }], }], }]; function onChange(value) { console.log(value); } ReactDOM.render( Cascader defaultValue{[zhejiang, hangzhou, xihu]} options{options} onChange{onChange} / , mountNode);代码要点拆解1. 数据结构options每个节点必须包含value选项值与label展示文本两个字段children数组承载子级。这里构造了两个省浙江、江苏各带两级子节点的标准树形结构。2. 默认值路径[zhejiang, hangzhou, xihu]第 0 项zhejiang匹配第一级选项浙江第 1 项hangzhou在浙江的children中匹配杭州第 2 项xihu在杭州的children中匹配西湖三条路径全部命中组件初始即回显为浙江 / 杭州 / 西湖。3.onChange(value)回调用户重新选择后回调参数value同样是路径数组例如选择江苏 / 南京 / 中华门时输出[jiangsu, nanjing, zhonghuamen]。注意事项defaultValue必须与options中已有的value完全对应。如果传入的路径在options中找不到匹配节点从源码实现见下文回显原理可知该路径对应的层级将无法映射出label回显文本会缺失对应部分。defaultValue只用于初始态组件挂载后通过用户交互改变的选择值不会反向同步到defaultValue属性如需在外部控制并随时重置选中值应改用受控的value属性。defaultValue 与 value非受控与受控的选择从 组件实现源码 可以清晰看到defaultValue与value在内部的定位constructor(props) { super(props); this.state { value: props.value || props.defaultValue || [], popupVisible: false, }; } componentWillReceiveProps(nextProps) { if (value in nextProps) { this.setState({ value: nextProps.value || [] }); } }两点源码事实挂载阶段state 中的value取props.value若未传则回退到props.defaultValue再没有则回退到空数组[]。也就是说defaultValue本质上是为非受控场景提供的初始值入口最终都会统一收敛到内部 state。更新阶段componentWillReceiveProps中通过value in nextProps判断——只有父组件显式传入value属性即受控模式时外部变化才会强制覆盖内部 state非受控模式下defaultValue不会参与后续更新。因此选择原则是场景推荐属性仅需设置初始选中项之后交给用户自由选择如表单默认值defaultValue需要外部状态驱动、或需要程序化重置/回填选中值valueonChange受控模式默认值的回显原理getLabel 与 array-tree-filter选中路径数组是如何变成输入框中浙江 / 杭州 / 西湖这种展示文本的答案在 getLabel 方法getLabel() { const { options, displayRender } this.props; const label arrayTreeFilter(options, (o, level) o.value this.state.value[level]) .map(o o.label); return displayRender(label); }其底层依赖array-tree-filter工具见 package.json 中声明的依赖array-tree-filter: ~1.0.0该工具沿着options树逐层过滤第level层只保留o.value value[level]的节点最终收集出从根到叶子的一条节点链再map成label数组。得到label数组后交给displayRender渲染函数拼接。默认渲染函数定义在 index.jsx 的 defaultPropsdisplayRender(label) { return label.join( / ); }即默认以 / 分隔多级文案。这也是为什么defaultValue数组必须逐层精确匹配value——任何一层失配都会让arrayTreeFilter在对应层找不到节点回显文案随之缺层。自定义回显若想改变回显格式可覆盖displayRender。例如 hover.md Demo 中只展示最后一项function displayRender(label) { return label[label.length - 1]; }此时无论选了几级输入框都只显示叶子节点的 label如西湖而内部value仍然是完整路径数组。默认值与相关交互配置defaultValue只是初始态组件其余交互属性决定了用户后续如何改变这个值两者配合使用才能完整理解级联选择器expandTrigger次级菜单展开方式click默认或hover见 hover.md 的expandTriggerhover用法。changeOnSelect设为true时点选任意一级即触发onChange允许只选中父级选项如只选浙江见 change-on-select.md。当该项为true时defaultValue也可以传入只到中间层的短路径例如[zhejiang, hangzhou]。allowClear是否显示清除按钮默认true。清除操作在 clearSelection 方法 中实现调用setValue([])将选中值置为空数组输入框随之清空defaultValue不会重新生效。disabled整体禁用单个选项禁用则需在options对应节点上加disabled: true字段见 disabled-option.md。placeholder未选中任何项时的占位文本默认请选择见 defaultProps。在表单场景中的推荐用法在真实的表单提交场景中级联选择的结果通常需要回填到表单数据中。推荐做法表单初始数据用defaultValue赋值一次提交时通过onChange拿到用户最新选择的路径数组。例如Cascader defaultValue{[zhejiang, hangzhou, xihu]} options{options} onChange{(value) { // value 形如 [jiangsu, nanjing, zhonghuamen] formData.region value; }} /如果需要联动重置比如切换省份后清空市、区则应改用受控模式用value属性驱动组件状态配合onChange在外部维护选中路径实现更精细的交互控制。小结defaultValue通过数组指定初始选中项数组元素按层级顺序对应options中从根到叶的value路径它只在组件首次挂载时生效是典型的非受控初始值需要外部控制选中态时改用value选中回显依赖array-tree-filter逐层匹配 label再由displayRender默认以 / 连接渲染因此路径必须与options完全对应与expandTrigger、changeOnSelect、allowClear、disabled等交互配置组合使用可覆盖省市区选择、只选父级、移入展开等常见业务场景。更多用法可参考官方示例 基本用法、移入展开、选择即改变 与 禁用选项完整 API 参数表见 Cascader 组件文档底层实现细节可查阅 index.jsx 与样式文件 cascader.less。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考