基于antd Tree实现可编辑菜单树，支持节点新增、删除

基于antd3 Tree实现可编辑菜单树，支持节点新增,编辑,删除

基于antd Tree，实现了可编辑菜单树，支持以下功能：
树节点 新增，编辑，删除

---

提示：以下代码，可参考

一、效果

二、完整代码

1.引入库

代码如下（示例）：

import * as React from 'react';
import { Modal, Button, Input, Popconfirm, Tree, Icon } from 'antd';

const { TreeNode } = Tree;
var tempKey: any = '1000';

const App = (props) => {
    const { onHandleCancel = () => { }, onHandleOk = () => { }, data = {} } = props;
    var datavalue = [
        {
            value: "0",
            defaultValue: "0",
            key: "0",
            parentKey: '0',
            isEditable: false,
            children: [
                {
                    value: "0-1",
                    key: "0-1",
                    defaultValue: "0-1",
                    isEditable: false,
                },
                {
                    value: "0-2",
                    key: "0-2",
                    defaultValue: "0-2",
                    isEditable: false,
                },
            ],
        },
        {
            value: "1",
            defaultValue: "1",
            key: "1",
            parentKey: '1',
            isEditable: false,
            children: [
                {
                    value: "0-1-1",
                    key: "0-1-1",
                    defaultValue: "0-1-1",
                    isEditable: false,
                },
                {
                    value: "0-2-1",
                    key: "0-2-1",
                    defaultValue: "0-2-1",
                    isEditable: false,
                },
            ],
        },
    ]
    const [treeData, setTreeData] = React.useState(datavalue);

    const onDragEnter = (info) => {
        console.log(info);
    };

    // 拖拽
    const onDrop = (info) => {
        console.log(info);
        const dropKey = info.node.props.eventKey;
        const dragKey = info.dragNode.props.eventKey;
        const dropPos = info.node.props.pos.split('-');
        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);

        const loop = (data, key, callback) => {
            for (let i = 0; i < data.length; i++) {
                if (data[i].key === key) {
                    return callback(data[i], i, data);
                }
                if (data[i].children) {
                    loop(data[i].children, key, callback);
                }
            }
        };

        const data = [...treeData];

        let dragObj;
        loop(data, dragKey, (item, index, arr) => {
            arr.splice(index, 1);
            dragObj = item;
        });
        if (!info.dropToGap) {
            // Drop on the content
            loop(data, dropKey, (item) => {
                item.children = item.children || [];
                // where to insert 示例添加到尾部，可以是随意位置
                item.children.push(dragObj);
            });
        } else if (
            (info.node.props.children || []).length > 0 && // Has children
            info.node.props.expanded && // Is expanded
            dropPosition === 1 // On the bottom gap
        ) {
            loop(data, dropKey, (item) => {
                item.children = item.children || [];
                // where to insert 示例添加到头部，可以是随意位置
                item.children.unshift(dragObj);
            });
        } else {
            let ar;
            let i;
            loop(data, dropKey, (item, index, arr) => {
                ar = arr;
                i = index;
            });
            if (dropPosition === -1) {
                ar.splice(i, 0, dragObj);
            } else {
                ar.splice(i + 1, 0, dragObj);
            }
        }
        setTreeData(data);
    };


    //新增
    const onAdd = (key) => {
        console.log('onAdd', key);
        var treeDataOld = JSON.parse(JSON.stringify(treeData));
        var treeDataNew = addNode(key, treeDataOld);
        setTreeData(treeDataNew);

        tempKey++;
        function addNode(key, data) {
            data.forEach((item) => {
                if (item.key === key) {
                    item.children
                        ? item.children.push({
                            value: `默认值${tempKey}`,
                            key: `${tempKey}`
                        })
                        : (item.children = [
                            {
                                value: `默认值${tempKey}`,
                                key: `${tempKey}`
                            }
                        ]);
                } else {
                    if (item.children) {
                        addNode(key, item.children);
                    }
                }
            });
            return data;
        }

    };
    //删除
    const onDelete = (key) => {
        console.log('onAdd', key);
        var treeDataOld = JSON.parse(JSON.stringify(treeData));
        var treeDataNew = deleteNode(key, treeDataOld);
        setTreeData(treeDataNew);

        function deleteNode(key, arr) {
            arr.map((item, index) => {
                if (item.key == key) {
                    arr.splice(index, 1);
                }
                if (item.children) {
                    deleteNode(key, item.children);
                }
            });
            return arr;
        }
    };

    // const onChange = (e, key) => {
    //     console.log('onChange', e, key);
    //     var treeDataOld = JSON.parse(JSON.stringify(treeData));
    //     var treeDataNew = editNode(key, treeDataOld, e.target.value);
    //     setTreeData(treeDataNew);

    //     function editNode(key, data, val) {
    //         data.forEach((item) => {
    //             if (item.key === key) {
    //                 item.title = val;
    //             } else {
    //                 if (item.children) {
    //                     editNode(key, item.children, val);
    //                 }
    //             }
    //         });
    //         return data;
    //     }
    // };
    const onChange = (e, key) => {
        changeNode(key, e.target.value, treeData);
        setTreeData(treeData.slice());
    };

    const changeNode = (key, value, data) =>
        data.forEach((item) => {
            if (item.key === key) {
                item.value = value;
            }
            if (item.children) {
                changeNode(key, value, item.children);
            }
        });

    const onEdit = (key) => {
        editNode(key, treeData);
        setTreeData(treeData.slice());
    };

    const editNode = (key, data) =>
        data.forEach((item) => {
            if (item.key === key) {
                item.isEditable = true;
            } else {
                item.isEditable = false;
            }
            // item.value = item.defaultValue; // 当某节点处于编辑状态，并改变数据，点击编辑其他节点时，此节点变成不可编辑状态，value 需要回退到 defaultvalue
            if (item.children) {
                editNode(key, item.children);
            }
        });

    //编辑树节点时直接选中
    const callbackRef = React.useCallback((node) => {
        node && node.focus();
        node && node.select();
    }, []);

    const handleBlur = (e, item) => {
        // let arr = _.cloneDeep(dataSource)
        // const value = e.target.value;
        // if (value) {//更改右侧树对应节点的值
        //     setDataSource(treeLip(arr, item.associativeId, e.target.value))
        // }
        // setEditType({ edit: false, id: item.associativeId })
    }
    const onSave = (key) => {
        saveNode(key, treeData);
        setTreeData(treeData.slice());
    };

    const saveNode = (key, data) =>
        data.forEach((item) => {
            if (item.key === key) {
                item.defaultValue = item.value;
            }
            if (item.children) {
                saveNode(key, item.children);
            }
            item.isEditable = false;
        });

    const InputCopy = (item) => {
        return <Input autoFocus={true} onBlur={(e) => handleBlur(e, item)} ref={callbackRef} maxLength={40} />
    }
    const renderTreeNodes = (data) => {
        let nodeArr = data.map((item) => {
            if (item.isEditable) {
                item.title = (
                    <div>
                        <input value={item.value || ''} onChange={(e) => onChange(e, item.key)} />
                        <Icon type="close" style={{ marginLeft: 10 }} onClick={() => onDelete(item.key)} />
                        <Icon type="check-circle" style={{ marginLeft: 10 }} onClick={() => onSave(item.key)} />
                    </div>
                );
            } else {
                item.title = (
                    <div>
                        <span>{item.value}</span>
                        <span>
                            <Icon type="plus" style={{ marginLeft: 10 }} onClick={() => onAdd(item.key)} />
                            <Icon type="form" style={{ marginLeft: 10 }} onClick={() => onEdit(item.key)} />
                            <Icon type="close" style={{ marginLeft: 10 }} onClick={() => onDelete(item.key)} />
                        </span>
                    </div>
                );
            }


            if (item.children) {
                return (
                    <TreeNode title={item.title} key={item.key} dataRef={item}>
                        {renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }

            return <TreeNode title={item.title} key={item.key} />;
        });

        return nodeArr;
    };

    const iconRender = (node: any) => {
        let htmlNode = <i className="icon iconfont icon-yuandian" />;
        if (!node.isLeaf) {
            htmlNode = (
                <i style={{ color: '#F2B223' }} className="icon iconfont icon-tree-folder-close" />
            );
            if (node.expanded) {
                htmlNode = (
                    <i style={{ color: '#F2B223' }} className="icon iconfont icon-tree-folder-open" />
                );
            }
        }
        return <React.Fragment>{htmlNode}</React.Fragment>;
    }


    return (
        <>
            <Modal
                title={data?.header}
                visible={true}
                onOk={() => onHandleOk()}
                onCancel={() => onHandleCancel(false)}
                okText="确认"
                cancelText="取消"
                maskClosable={false}
            >
                <Tree
                    className="draggable-tree"
                    defaultExpandAll={true}
                    showLine
                    showIcon
                    // icon={iconRender}
                    draggable
                    onDragEnter={onDragEnter}
                    onDrop={onDrop}
                >
                    {treeData?.length && renderTreeNodes(treeData)}

                </Tree>
            </Modal>
        </>
    );
};

export default App;