react–antd 实现TreeSelect树形选择组件,实现点开一层调一次接口

目录

法1:需求: react–antd 实现TreeSelect树形选择组件,实现点开一层调一次接口

注意:

部分代码:

法2:封装成公共的:


法1:需求: react–antd 实现TreeSelect树形选择组件,实现点开一层调一次接口

效果图: 

465117ae25504b88af7414565685c442.jpg


注意:

当选择“否”,开始调接口,不要把点击事件调接口写在TreeSelect组件上,这样会导致问题出现(本来效果是点击一层级展开下一层级,结果显示第一层节点打开后,点击节点,所有节点都没了),没有层级了

原因: 1、更改下点击事件位置   2、层级的id是不是重复了(第一次点击输入框调接口,获取树形数据,当第二次再点击输入框时,又重新刷新刚才获取的树形数据,如果第一次调接口时,展开的层级中只有一个层级的,即没有children,就会影响第二次点击,即第二次点击就只显示一层,并且没有可展开的三角,所以第二次及之后的点击,不要再次调接口)

解决: 区分是不是第一次点击,如果不是第一次点击,就不调接口了

6a8148adef2940ea9de322ac97d1a76a.jpg


部分代码:

070c9547f24d4e299bff5ea7b8bd4855.jpg

 850d6a7c7afe49d5b1c2fb55a91d904c.jpg

ff4f9381888a41eab983455e69cfef17.jpg 92cdbc508cc84bd8b3c350571a2ea15c.jpg


法2:封装成公共的:

注意:调接口要区分第几次点击的

 拓展:

使用Ant Design UI库实现异步加载树形结构文件夹管理 | WUWEI'S BLOG

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值