当前位置: 首页 > news >正文

解决antd TreeSelect 返回值不包含父节点问题 -自定义组件(react)

在写一个表单时使用了antd的 TreeSelect,在对TreeSelect的值提交时发现,父节点的值在半选状态时未提交,在选中状态时(子节点全选),子节点不提交,只提交父节点,这与后端需求不符,后端要求提交全部的节点,所有手动改造了一下,以适应需求,组件代码如下:
 

import { TreeSelect } from "antd";
import React, { useState, useEffect } from "react";export type FromTreeItem = {key?: number | string;title?: string;parentKey?: number | string;value?: number | string;children?: FromTreeItem[];
};export type FromTreeSelectProps = {value?: any;treeData?: FromTreeItem[];onChange?: (value: any) => void;
};/**  * 解决antd TreeSelect 返回值不包含父节点问题  * @param props   * @returns   */
const FromTreeSelect: React.FC<FromTreeSelectProps> = (props) => {const [selectedKeys, setSelectedKeys] = useState<(string | number)[]>([]);const [treeDataMap, setTreeDataMap] = useState<Record<string | number, FromTreeItem>>({});const treeToMap = (tree: FromTreeItem[]): Record<string | number, FromTreeItem> => {const map: Record<string | number, FromTreeItem> = {};const traverse = (nodes: FromTreeItem[]) => {nodes.forEach(node => {node.key ? map[node.key] = node : null; // 将当前节点添加到映射中  if (node.children) {traverse(node.children); // 递归遍历子节点  }});};traverse(tree); // 从根节点开始遍历  return map;};useEffect(() => {if (props.treeData)setTreeDataMap(treeToMap(props.treeData))}, [props.treeData]);useEffect(() => {// 初始化 selectedKeys  if (props.value && treeDataMap) {setSelectedKeys(getAllChildrenKey(props.value));}}, [treeDataMap, props.value]);/**  * 根据选中的key找到所有父节点key并一起返回  * @param selectKeys   */const getAllNodeKey = (selectKeys: (string | number)[]): (string | number)[] => {const allKeys = new Set<string | number>(selectKeys);;const traverse = (node: FromTreeItem) => {if (node.parentKey) {allKeys.add(node.parentKey)traverse(treeDataMap[node.parentKey])}};selectKeys.forEach(key => {traverse(treeDataMap[key])});return Array.from(allKeys);};/**  * 根据给定的值 ,找到给定节点是否选中了子节点,如选中了子节点,则删除当前节点* @param keys   * @param tree   */const getAllChildrenKey = (keys: (string | number)[]): (string | number)[] => {if (!keys)return []const allKeys = new Set<string | number>(keys);keys.forEach(key => {const node: FromTreeItem = treeDataMap[key];if (node.children) {node.children.forEach((child) => {if (node.key && allKeys.has(node.key) && child.key && allKeys.has(child.key)) {allKeys.delete(node.key)}});}})return Array.from(allKeys);};const handleChange = (newKeys: (string | number)[]) => {setSelectedKeys(newKeys);if (props.onChange) {props.onChange(getAllNodeKey(newKeys));}};const { SHOW_ALL } = TreeSelect;return (<TreeSelecttreeCheckabletreeData={props.treeData}value={selectedKeys}onChange={handleChange}showCheckedStrategy={SHOW_ALL}/>);
};export default FromTreeSelect;

使用方式同antd的其他组件,如:
 

 <Form.Itemname={'menuIds'}label={'菜单'}rules={[{ required: true }]}><FromTreeSelect treeData={menuTreeData} /></Form.Item>

相关文章:

解决antd TreeSelect 返回值不包含父节点问题 -自定义组件(react)

在写一个表单时使用了antd的 TreeSelect&#xff0c;在对TreeSelect的值提交时发现&#xff0c;父节点的值在半选状态时未提交&#xff0c;在选中状态时&#xff08;子节点全选&#xff09;&#xff0c;子节点不提交&#xff0c;只提交父节点&#xff0c;这与后端需求不符&…...

花四小时,写了个在线实时绘制等值面图小软件,明晚上线,喜欢的小伙伴关注哦

科研党的福音&#xff0c;绘图再也不需要安装一堆软件了&#xff0c;可以在线绘图了&#xff1b; 只需要传入绘制的区间、色值、以及所需要绘制的数据就可以直接出图了&#xff0c;可绘制各种等值面图&#xff0c;比如降水分布&#xff0c;高温分布&#xff0c;人口分布&#x…...

c++的vector用法

文章目录 1. 创建和初始化 std::vector2. 添加和删除元素3. 访问和遍历元素4. std::vector 的其他常用操作 std::vector 是 C 标准库中的一个动态数组容器&#xff0c;提供了灵活的存储和访问功能。 1. 创建和初始化 std::vector #include <iostream> #include <vect…...

【Linux网络】Linux网络初探:开启网络世界的大门

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 前言&#xff1a;我们已经系统的学习了Linux的基本操作、进程、线程、文件、通信等待&#xff0c;但是在如今社会没有网络通信方式是万万不行的&#xff0c;今天我们就走进网络中&#xff0c;系统的学习一下有关Linux网…...

目录、用户与组、出错相关函数、时间函数

一、目录相关函数及属性 1、 opendir()函数 opendir 用于打开一个目录&#xff0c;并返回一个目录流指针。name&#xff1a;要打开的目录的路径。 返回值&#xff1a;成功时返回指向目录流的指针&#xff0c;失败时返回 NULL。 #include <dirent.h> DIR *opendir(con…...

<keep-alive> 一分钟了解

<keep-alive> 一分钟了解 <keep-alive> 是 Vue.js 提供的一个抽象组件&#xff0c;它的主要用途是在页面或组件切换时保留其状态&#xff0c;避免重复执行昂贵的渲染操作&#xff0c;从而提升应用性能。 文章目录 <keep-alive> 一分钟了解 一、 <keep-ali…...

Android 启动动画太生硬

跟 android:launchMode"singleTask"属性无关系 请禁用路由 ARouter.getInstance() .build(Routes.Main.MAIN) .withTransition(R.anim.activity_anim_in, R.anim.activity_anim_out).navigation() 正确做法是 val intent Intent(thisSplashActivity,MainActivit…...

深度学习中常用概念总结

最近在做深度学习&#xff0c;里面涉及到很多概念&#xff0c;有的名称都差不多容易记混。所以写这篇文章总结一下。眼过千遍不如手过一遍。 1. 轮数&#xff08;Epochs&#xff09;: 一轮&#xff08;Epoch&#xff09;指的是整个训练数据集在训练过程中被完整使用一次。…...

进 程

1.进程&#xff1a;进行中的程序。 微观串行&#xff0c;宏观并行。 程序的一次执行过程 进程是程序的一个实例 一个程序可以对应一个或多个进程。 2.为什么需要进程&#xff1f; 3.进程的组成部分&#xff1a; 进程 pcb 块 栈|堆|bss|data|text 其中&#xff1a; 家族…...

Taro-UI

一、安装Taro UI 进入项目文件&#xff0c;执行项目 //使用yarn安装taro-ui yarn add taro-ui//使用npm安装taro-ui npm install taro-ui//注&#xff1a;因为要支持自定义主题功能&#xff0c;需要将样式从组件中抽离出来&#xff0c;在微信小程序中依赖 globalClass 功能&a…...

TypeScript 之 JavaScript文件类型检查

启用对 JavaScript 文件的类型检查 在 TypeScript 编译选项 compilerOptions 全部配置项 中&#xff0c;可以通过以下2个属性配置 JavaScript Support&#xff1a; allowJs 是否允许编译 JavaScript 文件。默认值是 false。在默认情况下&#xff0c;TypeScript 编译器只处理 .…...

基本数据类型变量间的自动提升与强制转换以及进制的转换

基本数据类型变量间的自动提升与强制转换 测试基本数据类型的运算规则 这里基本类型不包括布尔 运算规则 自动类型提升 当容量小的变量与容量大的变量做运算时&#xff0c;结果自动转换容量大的数据类型 说明&#xff1a;此时容量大小&#xff0c;指的是数据范围大小&…...

SparseConv 的学习笔记

安装 环境设置在74.183 sdfstudio 里面,SparseNeus 推荐的版本是是 torchsparse 2.0.0版本 命令行如下&#xff1a; 需要 C 的 sudo 权限指定安装&#xff1a; ## 安装依赖项 conda install -c conda-forge sparsehash sudo apt-get install libsparsehash-dev 进入官网下…...

vscode 快速生成vue 格式

1.用快捷Ctrl Shift P唤出控制台 输入“Snippets”并选择 Snippets: Configure User Snippets 2.输入vue&#xff0c;选中vue.json vs code自动生成vue.json文件 3.在 vue.json 中添加模板 {"Print to console": {"prefix": "vue2","b…...

react笔记:redux

redux状态管理 安装redux&#xff1a;num i redux 新建redux文件夹&#xff1a; store.jscount_reducer.js count_action.js constant.js (常量&#xff09; 1. store.js文件&#xff1a; // 该文件专门用于暴露一个store对象&#xff0c;整个应用只有一个store对…...

数据结构与算法--图的应用

文章目录 回顾提要连通图生成树最小生成树构造最小生成树的算法普里姆(Prim)算法克鲁斯卡尔(Kruskal)算法 最短路径狄杰斯特拉 (Dijkstra) 算法当前最短路径的更新拓扑排序拓扑排序方法拓扑排序示例总结 回顾 图的遍历方法&#xff1a; 深度优先遍历 (DFS)&#xff1a;从任意…...

【leetcode图文详解】特殊数组II : 空间换时间的“记忆化”,越多越好吗?

题目详解 需求&#xff1a;判断给定区间内的元素是否满足“特殊数组”要求 尝试: 暴力求解? 如果试着直接对每个queries中的区间进行检测而不做其他处理&#xff0c;那么最后不出意外地超时了。。 细想优化策略&#xff0c;不难察觉到其中可能存在大量的重复运算 那还等什…...

离线安装prometheus与Grafana实现可视化监控

简介 prometheus 是一个专为云环境设计的开源系统监控和警报工具&#xff0c;它收集并存储多维度的时间序列数据&#xff0c;通过PromQL查询语言提供强大的数据检索能力&#xff0c;并支持可视化及警报功能。而 Grafana 则是一个开源的数据可视化平台&#xff0c;能够与包括Pr…...

【Python学习-UI界面】PyQt5 小部件7-QSpinBox 计数器

样式如下: 一个 QSpinBox 对象向用户呈现一个文本框&#xff0c;右侧有一个上下按钮&#xff0c;显示一个整数。如果按下上下按钮&#xff0c;文本框中的值将增加/减少。 默认情况下&#xff0c;框中的整数从0开始&#xff0c;最高到99&#xff0c;并以步长1变化。对于浮点数…...

[二次元]个人主页搭建

文章目录 域名买一个免费的 框架HexoHexo-Theme-ParticleX Halo 参考 域名 买一个 有钱人玩这个 免费的 github.io 教程在github官方文档有&#xff1b; 框架 Hexo 静态的 Hexo-Theme-ParticleX Argvchsの小窝 Halo 动态的 halo 参考 基于Hexo框架的GitHub个人主页…...

Spring Data JPA 自动创建时间的相关注解和用法

以Springboot项目为例 在实体类上加上注解 EntityListeners(AuditingEntityListener.class)在相应的字段上添加对应的时间注解 LastModifiedDate 和 CreatedDateApplication启动类中添加注解 EnableJpaAuditing...

Java基础之隐式类型转换

类型转换 基本数据类型表示范围大小排序&#xff1a; 在变量赋值及算术运算的过程中&#xff0c;经常会用到数据类型转换&#xff0c;其分为两类&#xff1a; 隐式类型转换 显式类型转换 1 隐式类型转换 情形1&#xff1a;赋值过程中&#xff0c;小数据类型值或变量可以直…...

【数据结构与算法 | 图篇】Dijkstra算法(单源最短路径算法)

1. 前言 由图&#xff1a; 如果我们想要求得节点1到节点5&#xff08;也可以是其他节点&#xff09;的最短路径&#xff0c;我们可以使用Dijkstra算法。 2. 步骤与思路 1. 将所有顶点标记为未访问(顶点类的visited属性设置为false)。创建一个未访问顶点的集合。 2. 为每个顶…...

windows c转linux c要做的事情。

写在开头&#xff1a; 最近的copy项目要转到windows版本了&#xff0c;一直在跟进做这个事情。 直入主题说下移植过程中可能涉及以下几个方面的调整&#xff1a;‌ 编译器和工具链的更改&#xff1a;‌Windows和Linux使用不同的编译器和工具链&#xff0c;‌因此需要在Windo…...

【高等代数笔记】002.高等代数研究对象(二)

1. 高等代数的研究对象 1.4 一元高次方程的求根 a n x n a n − 1 x n − 1 . . . a 1 x a 0 0 a_{n}x^{n}a_{n-1}x^{n-1}...a_{1}xa_{0}0 an​xnan−1​xn−1...a1​xa0​0 等式左边是一元多项式。 所有一元多项式组成的集合称为一元多项式环。...

ubuntu服务器部署的mysql本地连不上的问题

试过了网上的所有方法,都连不上,可以执行: SELECT user, host, plugin FROM mysql.user WHERE user root; 查一下:plungin这个连接插件是不是auth_socket, auth_socket是只能本地连接的插件,需要修改: ALTER USER root% IDENTIFIED WITH mysql_native_password BY your_pass…...

python redis安装

python redis安装 #方法1、 sudo apt-get install redis-server python 支持包&#xff1a; (其实就一个文件&#xff0c;搞过来就能用) sudo apt-get install python-redis #方法2、 sudo pip install redis...

YJ0043定制版抖音电商卷抢购系统带回收商城抖音电商优惠卷投资理财系统

系统是基于逍遥商城二开的系统&#xff0c;pc手机端都新增了邀请码验证 手机端重新定制的UI&#xff0c;前端产品不至于抖音卷也可以自行更改其他产品 用户前端下单&#xff0c;后台订单可以直接回收&#xff0c;后台支持设置默认邀请码和抢卷时间限制...

如何选择图片和视频

文章目录 1. 概念介绍2. 方法与细节2.1 实现方法2.2 具体细节 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何选择视频文件"相关的内容&#xff0c;本章回中将介绍如何混合选择图片和视频文件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我…...

html+css网页制作 电商华为商城首页 ui还原度100%

htmlcss网页制作 电商华为商城首页 ui还原度100% 网页作品代码简单&#xff0c;可使用任意HTML编辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码…...