antdpro 树选中就展开
时间: 2023-08-21 22:07:36 浏览: 58
如果希望在 Antd Pro 的 Tree 组件中选中节点时自动展开该节点的子节点,可以通过设置 Tree 组件的 `expandedKeys` 属性来实现。
具体来说,可以在 Tree 组件的 `onSelect` 事件中更新 `expandedKeys` 属性,使得选中的节点对应的父节点都处于展开状态。示例代码如下:
```jsx
import { Tree } from 'antd';
const treeData = [
{
title: 'Parent 1',
key: '1',
children: [
{
title: 'Child 1-1',
key: '1-1',
},
{
title: 'Child 1-2',
key: '1-2',
},
],
},
{
title: 'Parent 2',
key: '2',
children: [
{
title: 'Child 2-1',
key: '2-1',
},
{
title: 'Child 2-2',
key: '2-2',
},
],
},
];
class Demo extends React.Component {
state = {
expandedKeys: [],
selectedKeys: [],
};
onSelect = (selectedKeys, info) => {
const expandedKeys = info.node.props.eventKeyPath;
this.setState({ selectedKeys, expandedKeys });
};
render() {
return (
<Tree
onSelect={this.onSelect}
expandedKeys={this.state.expandedKeys}
selectedKeys={this.state.selectedKeys}
treeData={treeData}
/>
);
}
}
ReactDOM.render(<Demo />, mountNode);
```
在上面的示例代码中,我们在 `onSelect` 事件中更新了 `expandedKeys` 属性,使得选中的节点对应的父节点都处于展开状态。这样,在选中一个节点后,该节点的子节点就会自动展开。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)