antd為T(mén)ree組件標(biāo)題附加操作按鈕功能

更新時(shí)間：2022年08月16日 11:45:59 作者：曲鳥(niǎo)???????

這篇文章主要介紹了antd為T(mén)ree組件標(biāo)題附加操作按鈕功能，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

一、前言

使用antd的tree組件實(shí)現(xiàn)下面這樣的模塊樹(shù)，點(diǎn)擊標(biāo)題請(qǐng)求其下列表的數(shù)據(jù)，點(diǎn)擊標(biāo)題旁邊的操作圖標(biāo)則執(zhí)行對(duì)應(yīng)的增刪改功能：

二、實(shí)現(xiàn)方案

1.封裝一個(gè)設(shè)置樹(shù)標(biāo)題的方法，通過(guò)開(kāi)關(guān)改變state來(lái)控制圖標(biāo)按鈕是否可見(jiàn)：

處理樹(shù)數(shù)據(jù)（name、children）

  const setTree = (module_data: any) => {
    return module_data.map((item: any) => {
      let _json = { ...item };
      _json.name = setTreeTitle(item);
      _json.children = item.children ? setTree(item.children) : [];
      return _json;
    });
  };

賦值給Tree的treeData：

<Tree
   		...
        treeData={setTree(treeData)} 
        ...
        fieldNames={{ title: 'name', key: 'id', children: 'children' }}
      />

2.樹(shù)標(biāo)題被選中時(shí)，則調(diào)用刷新列表的方法:

onSelect={(value: any, e: any) => {
      if (e.selected) {
        treeSelectFunc(value[0]);
      }
    }}

3.但需要注意的坑是，由于我增加了刪除功能，當(dāng)執(zhí)行刪除操作后，樹(shù)處于選中狀態(tài)的話就會(huì)報(bào)錯(cuò)，因?yàn)樘幱谶x中狀態(tài)就會(huì)調(diào)用刷新列表的方法，但該數(shù)據(jù)已經(jīng)被我刪除了，可能因此報(bào)錯(cuò)：

所以我們需要?jiǎng)?chuàng)建一個(gè)state來(lái)存儲(chǔ)當(dāng)前選中的數(shù)據(jù)：

const [selectId, setSelectId] = useState<any>(null);

然后在onSelect方法中判斷新選中的數(shù)據(jù)是否是當(dāng)前數(shù)據(jù)，如果是則不再執(zhí)行請(qǐng)求方法：

onSelect={(value: any, e: any) => {
  const selectValue = value[0]
  if (e.selected && selectValue !== selectId) {
    treeSelectFunc(selectValue);
    setSelectId(selectValue)
  }
}}

這樣就解決了刪除數(shù)據(jù)可能報(bào)錯(cuò)的問(wèn)題。

三、總結(jié)

到此這篇關(guān)于antd為T(mén)ree組件標(biāo)題附加操作按鈕功能的文章就介紹到這了,更多相關(guān)antd為T(mén)ree組件按鈕功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

關(guān)于antd tree和父子組件之間的傳值問(wèn)題(react 總結(jié))

相關(guān)文章

redis-benchmark并發(fā)壓力測(cè)試的問(wèn)題解析
這篇文章主要介紹了redis-benchmark并發(fā)壓力測(cè)試的問(wèn)題解析,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-01-01
Redis中ServiceStack.Redis和StackExchange.Redis區(qū)別詳解
本文主要介紹了Redis中ServiceStack.Redis和StackExchange.Redis區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
Redis分片集群的實(shí)現(xiàn)
Redis 分片集群是一種將 Redis數(shù)據(jù)庫(kù)分散到多個(gè)節(jié)點(diǎn)上的方式,以提供更高的性能和可伸縮性,本文主要介紹了Redis分片集群的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
2025-04-04
Redis?BigKey的問(wèn)題解決
本文主要介紹了Redis?BigKey的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
redis中修改配置文件中的端口號(hào) 密碼方法
今天小編就為大家分享一篇redis中修改配置文件中的端口號(hào) 密碼方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
Redis分布式鎖的實(shí)現(xiàn)方式
本文主要介紹了Redis分布式鎖的實(shí)現(xiàn)方式，分布式鎖是?滿(mǎn)足分布式系統(tǒng)或集群模式下多進(jìn)程可見(jiàn)并且互斥的鎖。感興趣的同學(xué)可以參考閱讀
2023-04-04
Redis高并發(fā)情況下并發(fā)扣減庫(kù)存項(xiàng)目實(shí)戰(zhàn)
本文主要介紹了Redis高并發(fā)情況下并發(fā)扣減庫(kù)存項(xiàng)目實(shí)戰(zhàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
使用redis實(shí)現(xiàn)附近的人功能
這篇文章主要介紹了使用redis實(shí)現(xiàn)附近的人,實(shí)現(xiàn)諸如附近的人這類(lèi)依賴(lài)于地理位置信息的功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2021-09-09
深入了解Redis的性能
這篇文章主要介紹了Redis的性能,作者通過(guò)Visual Studio上的C#程序?qū)ζ溥M(jìn)行了分析,需要的朋友可以參考下
2015-06-06
Redis高效率原因及數(shù)據(jù)結(jié)構(gòu)分析
這篇文章主要為大家詳細(xì)的介紹了Redis高效的原因以及分析了Redis高效的數(shù)據(jù)結(jié)構(gòu)，有需要的朋友可以借鑒參考下，希望能夠有所幫助
2021-09-09