mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
67 lines
1.1 KiB
TypeScript
67 lines
1.1 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
import { TreeSelect } from 'antd';
|
||
|
|
||
|
const { SHOW_PARENT } = 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',
|
||
|
},
|
||
|
{
|
||
|
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[]) => {
|
||
|
console.log('onChange ', value);
|
||
|
setValue(newValue);
|
||
|
};
|
||
|
|
||
|
const tProps = {
|
||
|
treeData,
|
||
|
value,
|
||
|
onChange,
|
||
|
treeCheckable: true,
|
||
|
showCheckedStrategy: SHOW_PARENT,
|
||
|
placeholder: 'Please select',
|
||
|
style: {
|
||
|
width: '100%',
|
||
|
},
|
||
|
};
|
||
|
|
||
|
return <TreeSelect {...tProps} />;
|
||
|
};
|
||
|
|
||
|
export default App;
|