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单选并准确获取父子节点 的相关文章

  • 数字和数字对象有什么区别?

    存储在普通变量中的数字有什么区别 var foo 5 和一个数字对象 var bar new Number 5 数字对象可以用来做什么 A Number对象包含一些有用的方法和属性 例如 数字对象方法 Method Description
  • DOM 元素宽度可以是非整数吗?

    我有一个页面 其 div 元素由 JavaScript 对齐 JavaScript 只是检查一组 div 元素来查找最大值偏移宽度 然后设置所有 div 元素 width成为最大偏移宽度 它在大多数浏览器和区域设置中都能完美运行 但在 Ma
  • 如何从谷歌地图中的纬度和经度获取地址位置? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 所以我有纬度和经度就像44 4647452 and 7 3553838 我需要获得如下地址 米兰 意大利 str 肯尼迪 89 我怎样才能
  • jQuery 显示隐藏左侧滑动面板

    我希望在单击按钮时面板从浏览器的左边缘滑动 并在单击同一按钮 切换 时隐藏面板 Html div class panel div a href class slider arrow show raquo a CSS panel width
  • 无法获取子 DOM 元素

    注 由于问题有点复杂 为了可读性对代码进行了抽象 We ve a
  • 如何使 CSS 样式覆盖 JavaScript 应用的样式

    我动态创建一个 HTML 表 并应用一些样式 var tbl document createElement table tbl id CrewMemberTable document getElementById CrewMemberPan
  • React Native 中循环 Json 并显示

    How do I go about looping the result i retrieved from Json render function console log this state list contents
  • 过滤文件上传仅用于文本文件

    我使用的是 Firefox 版本 14 0 1 我需要过滤上传文件窗口以仅显示 txt files 我的浏览器不仅仅支持文本文件 text plain 我可以通过指定此格式来限制图像文件 image 但我只需要过滤文本文件在文件选择器窗口中
  • 指令可以从父作用域中删除自身吗

    假设我有以下代码 div div div div 我的自定义指令有一个独立的范围 定义为 app directive customDirective function log return restrict E templateUrl te
  • 根据每个选项的值或 ID 过滤选择框

    我想使用jquery来过滤表单中的所有选择框 例如 在第一个选择框中 如果我选择 仅显示1 我想过滤所有选择元素中的所有选择选项 以隐藏值不包含 1 的任何选项 仅应显示带有 1 的产品值 如果选择 Filter 选项 则所有选择框的默认值
  • IE7 真的不支持indexOf javascript 吗? [复制]

    这个问题在这里已经有答案了 可能的重复 数组上的 indexOf 函数在使用 JavaScript 的 IE7 8 中不起作用 https stackoverflow com questions 11544983 indexof funct
  • 如何在不知道id的情况下从内页获取父iframe元素?

    让我们想象一下我有这样的东西 div div test html 是空页面 自定义hash属性始终具有不同的值 出于安全原因两个页面位于同一域 iframe 元素的数量和顺序是随机的 我的问
  • 如何检查浏览器中消失的元素?

    How can I inspect an element which disappears when my mouse moves away 我不知道它的 ID 类别或其他任何信息 但想检查它 我尝试过的解决方案 在控制台内运行 jQuer
  • 点击事件的事件处理程序自动触发 - jQuery [重复]

    这个问题在这里已经有答案了 可能的重复 为什么单击事件处理程序会在页面加载后立即触发 https stackoverflow com questions 7102413 why does click event handler fire i
  • React:在哪里扩展对象原型

    我使用创建了一个纯 React 应用程序创建反应应用程序 https github com facebookincubator create react app 我想延长String类并在一个或多个组件中使用它 例如 String prot
  • 接近堆限制的无效标记压缩分配失败 - JavaScript 堆内存不足

    我正在使用 Angular 7 2 当我进入ng serve 我面临以下问题 致命错误 接近堆限制的无效标记压缩分配失败 JavaScript 堆内存不足 这意味着什么 我该如何解决这个问题 完整的错误消息是 FATAL ERROR Ine
  • 返回不在函数中

    Firebug 报告 返回不在函数中 错误 没有位置 好吧 第 1 行什么都没有 我怎样才能找到这个错误的根源 return not in function Break on this error return 0 javascript r
  • Magnific Popup:来自span的源标题

    我想从锚标记内的隐藏标题字段中获取放大图像的标题 而不是从标题中获取 这是因为我的标题包含标记 HTML a href img zoom jpg img src img small jpg alt span class hide This
  • 嵌套对象的 setState

    我有一个嵌套对象作为状态 并且在组件中有一个表单 我正在考虑每次用户在表单中输入某些内容时更新状态 并且为了避免为每个输入创建许多函数 我正在考虑使用 switch 创建单个函数 使用 switch 创建单一函数是个好主意吗 如何更新对象的
  • 如何使用 Typescript 将 jest.spyOn 与 React 函数组件一起使用

    我正在使用 Typescript 和 hooks 开发一个 React 应用程序 并且尝试使用 Enzyme 和 Jest 来测试功能组件 我无法使用 jest spyOn 来测试我的组件中的方法 jest spyOn 方法无法正确解析并在

随机推荐

  • 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没有单选的问题