我使用react18.2 实现了list集合嵌套树形组件的操作,
我新建的一个集合,会同时生成集合里面的树形组件,
集合树形组件数据结构:
集合1
树形节点 <标签>
集合2
树形节点 <标签>
我在传递到数据到子组件,点击父组件中的对应的标签进行展示的时候,无论点击那个集合里面的树形组件标签都显示是最后一个集合中树形组件的数据
例如:
我新建立了两个集合
集合1 树形控件数据 01 方案 01 节点 01属性
我再建立一个集合 02 方案 02 节点 02 属性
集合2新建完成后点击标签查看属性,看集合1的属性会展示集合2的属性 每次都会把最开始新建的给覆盖掉
以下是部分的代码
父组件中
import { Avatar, List,Collapse,TreeSelect,Modal } from 'antd';
import React, { useState,useRef } from 'react';
import { PlusCircleOutlined,SolutionOutlined,DeleteOutlined,SearchOutlined} from '@ant-design/icons';
保存数据的方法
const [treeData, setTreeData] = useState([]);// 初始化树形数据
const [selectedKey,setSelectedKey]=useState(null);
const [basicData, setBasicData] = useState(null);
const [isModalOpenMeta,setIsModalOpenMeta]=useState(false);
const [basicMeta,setBasicMeta]=useState(null);
const [parentnode,setparentnode]=useState(null);
const [treeDataMap, setTreeDataMap] = useState({}); // 添加 treeDataMap 状态
const [refreshFlag, setRefreshFlag] = useState(0); // 定义一个 refreshFlag 状态
// 在父组件中定义一个 useRef 变量来保存属性数据对象
const attributeDataRef = useRef({});
const handleSave = (formData, isTree) => {
debugger
const TreeNode={
title: (
<span>
{`${formData.newNodeName}`}
<SolutionOutlined onClick={() => showModalBaisc(attributeDataRef.current)} style={{ marginLeft: '5px', marginRight: '5px' }}/>
<PlusCircleOutlined onClick={showModalForm} style={{ marginLeft: '5px', marginRight: '5px' }} />
</span>
),
value: randomId,
children: []
};
if(isTree){
const newNode = {
title: (
<span>
{`${formData.newNodeNo}-${formData.newNodeName}`}
<DeleteOutlined onClick={(event) => handleDelete(`${formData.newNodeNo}-${formData.newNodeName}`, event)} />
</span>
),
value: randomId,
};
// 更新映射表中的数据
const newTreeDataMap = { ...treeDataMap };
newTreeDataMap[TreeNode.value] = [TreeNode]; // 新增 newnode 子节点
setTreeDataMap(newTreeDataMap);
// 若不是树形节点,则直接将其添加到列表数据中
setSelectedNode(newNode); // 将新节点设置为当前所选节点
setListData([...listData, newNode]);
}else{
// 将新的树形节点附加到现有列表数据中
setListData([...listData, TreeNode]);
}
//赋值
debugger
setparentnode(formData.Parentlevel);
attributeDataRef.current = { ...attributeDataRef.current, ...formData };
setSelectedAttributeData({ ...attributeDataRef.current });
setRefreshFlag(refreshFlag + 1);
};
const showModalBaisc = (data) => {
setSelectedNode(data);
setIsModalOpenBasic(true);
};
引用子组件
<SolutionComponets
visible={isModalOpenBaic}
onClose={handleCloseModalBasic}
// AttributeDataRef={attributeDataRef}
attributeDataRef={{ ...attributeDataRef.current }}
refreshFlag={refreshFlag}
/>
渲染组件
<List style={{width:'50%'}}
itemLayout="horizontal"
dataSource={listData}
renderItem={(item, index) => (
<Collapse bordered>
<Panel header={item.title} key={index}>
<List.Item.Meta
avatar={<Avatar src={https://xsgames.co/randomusers/avatar.php?g=pixel&key=${index}
} />}
description="This is a solution project for generating Word documents"
/>
{/* 在 TreeSelect 中通过 getTreeDataForListItem 函数获取子节点列表数据 */}
<TreeSelect {...tProps} onSelect={onSelect} key={refreshFlag} treeData={getTreeDataForListItem(item.value)} />
</Panel>
</Collapse>
)}
/>
子组件中
import { Drawer,Input } from 'antd';
import React, { useState, useEffect } from 'react';
function SolutionComponents({ visible, onClose, attributeDataRef,refreshFlag }) {
const [selectedAttributeData, setSelectedAttributeData] = useState({});
useEffect(() => {
// 当 refreshFlag 发生变化时,清空之前的属性数据,重新获取新的属性数据
setSelectedAttributeData({});
setTimeout(() => {
setSelectedAttributeData({ ...attributeDataRef });
}, 0);
}, [attributeDataRef, refreshFlag]);
const handleCloseDrawer = () => {
// 在关闭组件前,将修改后的属性数据传递回父组件
attributeDataRef.current = { ...attributeDataRef.current, ...selectedAttributeData };
onClose();
};
return (
<>
<Drawer title="窗体属性" visible={visible} placement="right" onClose={handleCloseDrawer}>
<p>{selectedAttributeData ? selectedAttributeData.newNodeNo : ''}</p>
<p>{selectedAttributeData ? selectedAttributeData.newNodeName : ''}</p>
<p>{selectedAttributeData ? selectedAttributeData.ProjecTtype : ''}</p>
<p>{selectedAttributeData ? selectedAttributeData.Parentlevel : ''}</p>
</Drawer>
</>
);
}
export default SolutionComponents;
//假设您正在使用Ant Design的树组件
//您可以将选定节点的数据作为属性传递给模态组件
//这是一个如何实现这一目标的例子:
const [selectedNode, setSelectedNode] = useState(null);
//关键的onSelect事件,原文没贴,在这里设置点击后的current节点
const onSelect = (selectedKeys, info) => {
setSelectedNode(info.node);
};
const showModalForm = () => {
//将current节点的数据作为属性传递给Modal组件
//您可以使用selectedNode.props.data访问数据
//例如,<ModalComponent-data={selectedNode.props.data}/>
};
return (
<div>
<Tree onSelect={onSelect} />
<PlusCircleOutlined onClick={showModalForm} style={{ marginLeft: '5px', marginRight: '5px' }} />
</div>
);