import React, { useState, useEffect } from 'react';
import './index.css';
import { TreeSelect } from 'antd';
const { SHOW_ALL } = TreeSelect;
const treeData = [
{
title: 'Node1',
value: '0-0',
key: '0-0',
children: [
{
title: 'Child Node1',
value: '0-0-0',
key: '0-0-0',
},
],
},
{
title: 'Node2',
value: '0-1',
key: '0-1',
children: [
{
title: 'Child Node3',
value: '0-1-0',
key: '0-1-0',
children: [
{
title: 'Child Node33',
value: '0-1-0-0',
key: '0-1-0-0',
},
{
title: 'Child Node44',
value: '0-1-0-1',
key: '0-1-0-1',
},
{
title: 'Child Node55',
value: '0-1-0-2',
key: '0-1-0-2',
}
]
},
{
title: 'Child Node4',
value: '0-1-1',
key: '0-1-1',
},
{
title: 'Child Node5',
value: '0-1-2',
key: '0-1-2',
},
],
},
];
const App: React.FC = () => {
const [value, setValue] = useState(['0-0-0']);
const onChange = (newValue: string[], label, extra) => {
setValue(newValue);
};
const childrenValuePush = (node) => {
if (node.children) {
for (let i = 0; i<node.children.length; i++) {
setValue(pre=>[...pre, node.children[i]])
childrenValuePush(node.children[i])
}
} else {
return
}
}
const onSelect = (_, node, extra) => {
childrenValuePush(node)
};
useEffect(()=>{
console.log(value, value)
}, [value])
const tProps = {
treeData,
value,
onChange,
onSelect,
treeCheckStrictly: true,
treeCheckable: true,
showCheckedStrategy: SHOW_ALL,
placeholder: 'Please select',
style: {
width: '100%',
},
};
return <TreeSelect {...tProps} />;
};
export default App;
antd TreeSelect 勾选父级带子集 勾选子集不控制父级
最新推荐文章于 2024-06-17 15:06:06 发布
本文介绍了如何在React应用中使用AntDesign库中的TreeSelect组件,展示了一个示例,包括状态管理、节点选择处理和树形结构的遍历。
摘要由CSDN通过智能技术生成