ant-design/components/tree/demo/basic-controlled.md

105 lines
2.4 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 1
2016-09-01 18:12:12 +08:00
title:
2016-07-21 09:52:39 +08:00
zh-CN: 受控操作示例
2019-04-20 06:39:58 +08:00
en-US: Controlled Tree
2016-03-31 09:40:55 +08:00
---
2016-01-07 19:05:55 +08:00
2016-07-21 09:52:39 +08:00
## zh-CN
2016-01-07 19:05:55 +08:00
受控操作示例
2016-07-21 09:52:39 +08:00
## en-US
2019-04-20 06:39:58 +08:00
Controlled mode lets parent nodes reflect the status of child nodes more intelligently.
2016-07-21 09:52:39 +08:00
```tsx
2020-01-22 12:11:49 +08:00
import React, { useState } from 'react';
2016-01-07 19:05:55 +08:00
import { Tree } from 'antd';
2018-06-27 15:55:04 +08:00
2019-05-07 14:57:32 +08:00
const treeData = [
{
title: '0-0',
key: '0-0',
2017-09-15 11:14:22 +08:00
children: [
2019-05-07 14:57:32 +08:00
{
title: '0-0-0',
key: '0-0-0',
children: [
{ title: '0-0-0-0', key: '0-0-0-0' },
{ title: '0-0-0-1', key: '0-0-0-1' },
{ title: '0-0-0-2', key: '0-0-0-2' },
],
},
{
title: '0-0-1',
key: '0-0-1',
children: [
{ title: '0-0-1-0', key: '0-0-1-0' },
{ title: '0-0-1-1', key: '0-0-1-1' },
{ title: '0-0-1-2', key: '0-0-1-2' },
],
},
{
title: '0-0-2',
key: '0-0-2',
},
2017-09-15 10:42:59 +08:00
],
2019-05-07 14:57:32 +08:00
},
{
title: '0-1',
key: '0-1',
2017-09-15 11:14:22 +08:00
children: [
2019-05-07 14:57:32 +08:00
{ title: '0-1-0-0', key: '0-1-0-0' },
{ title: '0-1-0-1', key: '0-1-0-1' },
{ title: '0-1-0-2', key: '0-1-0-2' },
2017-09-15 10:42:59 +08:00
],
2019-05-07 14:57:32 +08:00
},
{
title: '0-2',
key: '0-2',
},
];
2016-01-07 19:05:55 +08:00
const Demo = () => {
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>(['0-0-0', '0-0-1']);
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>(['0-0-0']);
const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
2020-01-22 12:11:49 +08:00
const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
2018-06-27 15:55:04 +08:00
const onExpand = (expandedKeysValue: React.Key[]) => {
console.log('onExpand', expandedKeysValue);
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
2016-09-01 18:12:12 +08:00
// or, you can remove all expanded children keys.
setExpandedKeys(expandedKeysValue);
setAutoExpandParent(false);
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
const onCheck = (checkedKeysValue: React.Key[]) => {
console.log('onCheck', checkedKeysValue);
setCheckedKeys(checkedKeysValue);
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
const onSelect = (selectedKeysValue: React.Key[], info: any) => {
2016-01-15 20:10:46 +08:00
console.log('onSelect', info);
setSelectedKeys(selectedKeysValue);
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
return (
<Tree
checkable
onExpand={onExpand}
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
onCheck={onCheck}
checkedKeys={checkedKeys}
onSelect={onSelect}
selectedKeys={selectedKeys}
treeData={treeData}
/>
);
};
2016-01-07 19:05:55 +08:00
ReactDOM.render(<Demo />, mountNode);
2019-05-07 14:57:32 +08:00
```