【antd的tree结构实现点击文字展开】

问题描述

antd Tree结构只能点击三角展开，改为点击文字也可以。

解决方案：

import React from “react”;
import { Tree } from “antd”;

const { TreeNode} = Tree;

class MyTree extends React.Component {
state = {
expandedKeys: [],
}
onExpand = (expandedKeys) => {
this.setState({ expandedKeys });
}
onSelect = (selectedKeys) => {
const { expandedKeys } = this.state;
const key = selectedKeys[0];

if (expandedKeys.includes(key)) {
// 移除 key
this.setState({
expandedKeys: expandedKeys.filter(k => k !== key),
});
} else {
// 添加 key
this.setState({ expandedKeys: […expandedKeys, key] });
}
}

render(){
    return(
        <div>
            <Tree
                expandedKeys={this.state.expandedKeys}
                selectedKeys={[]}
                onExpand={this.onExpand}
                onSelect={this.onSelect}
                >
                
                <TreeNode title="parent 1" key="0-0">
                    <TreeNode title="leaf" key="0-0-0" >
                        <TreeNode title="leaff" key="0-0-0-0" />
                    </TreeNode>
                    <TreeNode title="leaf" key="0-0-1" />
                </TreeNode>
            </Tree>
        </div>
        
    )
}

}
export default MyTree;

原代码为：

import React from “react”;
import { Tree } from “antd”;

const { TreeNode} = Tree;

class MyTree extends React.Component {

render(){
    return(
        <div>
            <Tree>
                <TreeNode title="parent 1" key="0-0">
                    <TreeNode title="leaf" key="0-0-0" >
                        <TreeNode title="leaff" key="0-0-0-0" />
                    </TreeNode>
                    <TreeNode title="leaf" key="0-0-1" />
                </TreeNode>
            </Tree>
        </div>
        
    )
}

}
export default MyTree;