antd tree树形控件 onCheck单选并准确获取父子节点

2023-10-30

antd 的tree树形控件为什么没有单选属性?(还是我眼瞎没找到)

需求: 一个只能单选的tree树形控件,并且点击选中一个节点返回当前节点信息和父节点信息。

看上去很普通的需求,但是实现起来真的麻烦(就因为tree的onCheck没有单选的问题)。

效果

上代码

<Tree
	checkable
	defaultExpandAll
	checkedKeys={checkedKeys}
 	treeData={allClassify}
	onCheck={onCheck}
	onRightClick={createRightClick}
/>
  // 一级分类 父节点
  const [curParentKey, setCurParentKey] = useState<string>('')
  // 二级分类 子节点
  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
  // 用于判断是否是从选中父子节点(父下只有一个子的情况)到只有子节点的过程
  let [isSelectParent, setIsSelectParent] = useState<boolean>(false)
  // 模态框中选中分类
  const onCheck = (key:any, e:any) => {
    // 情况一:取消选中
    if(!key.length) return
    // 情况二:子只有一级,选中子,父也被选中了
    if((key.length > 2 && !isSelectParent) || !e.halfCheckedKeys.length) {
      setIsSelectParent(true)
      setCurParentKey(key[key.length - 1])
      setCheckedKeys([key[key.length - 2]])
      return 
    } 
    setIsSelectParent(false)
    // 情况三:正常选择,由于需要改为单选,但参数返回的数据会记录之前一次的选择,所以需要处理
    if(e.halfCheckedKeys.length === 1) {
      setCurParentKey(e.halfCheckedKeys[0])
    } else {
      // 半选节点(halfCheckedKeys)是按顺序的,所以这样处理
      for(let item of e.halfCheckedKeys) {
        if(item !== curParentKey) {
          setCurParentKey(item)
          break
        }
      }
    }
    setCheckedKeys(key.length === 0 ? [] : [key[key.length - 1]])
  }  

由于 onCheck 函数返回的是选中的节点的信息,但是我又想做成单选的,所以就会导致返回的参数信息不符合需求。

通过 setCheckedKeys() 只在数组中加入一个值就能实现单选的效果。但是 onCheck 返回的参数是以为你选了当前这个值,还有上一个的节点,它将两个的信息都返回了。所以就只能硬着头皮处理数据了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

antd tree树形控件 onCheck单选并准确获取父子节点 的相关文章

随机推荐

  • Differences between Thumb and ARM instruction sets

    本文转载至 http infocenter arm com help index jsp topic com arm doc dui0068b ch02s02s09 html The general differences between
  • 动态规划-最大子数组

    题目 给定一个整数数组 找出和最大的子数组 返回其和 例如 1 2 3 5 1 2 最大子数组 3 5 1 2 和为9 分析 利用动态规划 记Sum i 表示以A i 结尾的子数组中的和最大子数组 Sum i 1 呢 考虑Sum i 的情况
  • c++智能指针

    我们在编写c 程序时经常会面临内存泄漏的问题 例如 void f int p new int throw unknow exception delete p 在这个简单的函数中 我们申请了一块内存 但是因为抛出异常跳出函数执行catch函数
  • linux dc命令,Linux中dc命令起什么作用呢?

    摘要 下文讲述Linux中dc的功能说明 如下所示 dc命令是Linux下一个任意精度的计算器 dc命令功能 用于计算操作 dc命令注意事项 1 dc命令支持无限精度运算 2 dc命令可定义及调用宏 3 dc命令可从界面读取数据 也可从指定
  • 验证手机号 身份证号 邮箱号

    public class ValidateUtil 验证手机号格式是否正确 param phone return public static boolean isMobilePhone String phone if StringUtils
  • 导入ecplise项目No projects are found to import解决方案

    最近在clone一个git项目的时候遇到一些文件 首先导入直接显示 No projects are found to import 显然这是ecplise无法正确识别项目类型导致的 这是由于ecplise识别一个工程需要 classpath
  • VS2019安装Qt插件(附安装失败解决方案)

    方法1 1 进入官网下载 qt vsaddin msvc2019 2 4 3 vsix 然后点击运行 2 点击install安装插件 3 等待安装完成Close 打开VS2019 4 在扩展下面就会出现Qt VS Tools 然后进入Qt
  • X电容(差模电容)和Y电容(共模电容)简介

    性质 X电容和Y电容多应用于开关电源当中 都属于安规电容 安规电容是指用于这样的场合 即电容器失效后 不会导致电击 不危及人身安全 X电容 外观容值 多是黄色 方形 uF级别的电容 作用 X电容主要用于抑制差模干扰 位置 接在火线零线之间
  • Java中的LinkedList集合详解

    LinkedList集合 基础概念 可以在任何位置高效插入和删除的一个有序序列 简而言之就是数据结构里的链表 我们都清楚在链表很容易进行插入和删除 但是我们在使用c c 的时候需要新建一个链表项的结构体并且需要在里面设置指针 java不需要
  • IO流(一)

    IO概述 什么是IO java中I O的操作主要是靠java io包下的类和接口来实现的 IO分类 根据数据的流向 输入流和输出流 输入流 把数据从其他设备上读取到内存当中的流 输出流 把数据从内存当中写入到其他设备上的流 根据数据的类型分
  • [C++] 哈希详解

    目录 1 哈希概念 2 实现机制 2 1 插入时 2 2 查找时 2 3 缺陷 2 4 常见哈希函数 2 4 1 直接定制法 2 4 2 除留余数法 2 4 3 平方取中法 2 4 4 折叠法 注意 3 解决哈希冲突 3 1 闭散列 3 1
  • zabbix的安装配置及基本使用

    一 zabbix的安装 1 最小化安装操作系统 安装以下常用依赖包 yum install vim iotop bc gcc gcc c glibc glibc devel pcre pcre devel openssl openssl d
  • qcustomplot绘制动态曲线_第十讲 频域分析法(Nyquist曲线)

    金鸡一唱天下白 第九讲 根轨迹法 zhuanlan zhihu com 自动化人 知乎 www zhihu com 概述 频域 频率响应 分析法是研究控制系统的一种工程方法 典控制理论最重要 最主要的分析方法 应用系统的频率特性可以间接地分
  • 获取在本地缓存

    我们有时候需要获取在本地缓存 在这个时候我们大部分朋友们做不到 今天我找到啦这个的好办法 现在分享给你们 第一步 如果我们已登录并保存缓存的话 我们可以直接看下面的代码 这个是在我们需要的js里面获取缓存的数据 第二步 如果你还没完成登录并
  • 《计算机网络》——第四章知识点

    五类题型1 已知主机IP地址和子网掩码 求网络号2 已知主机IP地址和子网掩码 求子网 主机最多有多少个 3 已知网络号 X位子网号 求子网掩码4 已知网络号 要分成X个子网 求子网掩码和IP地址范围 5 已知子网掩码 求哪些IP地址属于同
  • 操作系统考研复习——第五章(设备管理)

    操作系统考研复习 第五章 设备管理 5 输入 输出 I O管理 5 1 I O管理概述 5 1 1 I O设备 1 什么是I O设备 2 I O设备的分类 按使用特性 3 I O设备的分类 按传输速率分类 4 I O设备的分类 按信息交换的
  • 人机(AI)四人斗地主

    最近在使用Cocos Creator做一款四人斗地主的手机游戏 半成品 仅前端 代码附在最后 仅供参考 游戏中的单机 人机 模式以及游戏过程中的托管都需要出牌算法的设计 因此借这篇博客梳理一下现有的一些思路 首先 明确 AI出牌算法的目的是
  • 使用cmd命令行启动asp.net core 以及.net 5项目

    asp net core 通过CMD命令启动
  • 在 JavaScript 中将字符串转换为数字的 7 种方法

    1 使用 parseInt parseInt 解析一个字符串并返回一个整数 允许空格 仅返回第一个数字 这种方法虽然有一个限制 如果您解析十进制数 它将四舍五入到最接近的整数值 并将该值转换为string 可能需要使用parseFloat
  • antd tree树形控件 onCheck单选并准确获取父子节点

    antd 的tree树形控件为什么没有单选属性 还是我眼瞎没找到 需求 一个只能单选的tree树形控件 并且点击选中一个节点返回当前节点信息和父节点信息 看上去很普通的需求 但是实现起来真的麻烦 就因为tree的onCheck没有单选的问题