帮我用react 写一个tree的多选组件
时间: 2023-09-28 09:09:51 浏览: 55
好的,以下是一个简单的 React Tree 多选组件的实现:
```jsx
import React, { useState } from 'react';
function TreeNode({ node, onToggle }) {
const [expanded, setExpanded] = useState(false);
const [checked, setChecked] = useState(false);
const handleToggle = () => {
setExpanded(!expanded);
onToggle(node.id);
};
const handleCheck = () => {
setChecked(!checked);
};
return (
<li>
<div className="node">
<span onClick={handleToggle}>
{node.children && (expanded ? '👇' : '👉')}
</span>
<input type="checkbox" checked={checked} onChange={handleCheck} />
{node.name}
</div>
{node.children && expanded && (
<ul>
{node.children.map(childNode => (
<TreeNode
key={childNode.id}
node={childNode}
onToggle={onToggle}
/>
))}
</ul>
)}
</li>
);
}
function Tree({ data, onSelectionChange }) {
const [selectedIds, setSelectedIds] = useState([]);
const handleToggle = nodeId => {
setSelectedIds(selectedIds =>
selectedIds.includes(nodeId)
? selectedIds.filter(id => id !== nodeId)
: [...selectedIds, nodeId]
);
};
const handleSelectionChange = () => {
onSelectionChange(selectedIds);
};
return (
<div>
<ul>
{data.map(node => (
<TreeNode key={node.id} node={node} onToggle={handleToggle} />
))}
</ul>
<button onClick={handleSelectionChange}>Save Selection</button>
</div>
);
}
export default Tree;
```
这个组件接受一个数据源 `data`,用于渲染树的节点。每个节点包含一个 `id`,一个 `name` 和一个可选的 `children` 数组,用于表示其子节点。当用户在复选框中选中或取消选中节点时,组件将调用 `onSelectionChange` 回调函数,并传递当前已选中节点的 ID 数组。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)