使用antd的tree
组件实现下面这样的模块树,点击标题请求其下列表的数据,点击标题旁边的操作图标则执行对应的增删改功能:
1.封装一个设置树标题的方法,通过开关改变state来控制图标按钮是否可见:
2.树标题被选中时,则调用刷新列表的方法:
onSelect={(value: any, e: any) => {
if (e.selected) {
treeSelectFunc(value[0]);
}
}}
3.但需要注意的坑是,由于我增加了删除功能,当执行删除操作后,树处于选中状态的话就会报错,因为处于选中状态就会调用刷新列表的方法,但该数据已经被我删除了,可能因此报错:
所以我们需要创建一个state来存储当前选中的数据:
const [selectId, setSelectId] = useState<any>(null);
然后在onSelect
方法中判断新选中的数据是否是当前数据,如果是则不再执行请求方法:
onSelect={(value: any, e: any) => {
const selectValue = value[0]
if (e.selected && selectValue !== selectId) {
treeSelectFunc(selectValue);
setSelectId(selectValue)
}
}}
这样就解决了删除数据可能报错的问题。
发这篇文章的目的是好久没发文了,活跃度掉了不少!周排名总排名一直再降,所以先水一篇稳一波。
等闲下来的时候还是要坚持写作来巩固提升自己。
欢迎测开、测试同学、python同学点下方名片加我进交流群,大厂同学、行业大佬在线答疑。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://quniao.blog.csdn.net/article/details/123132734
内容来源于网络,如有侵权,请联系作者删除!