React-antd-tree-transfer

import { Tree,Button,Card } from 'antd';
import {useEffect, useState} from 'react';
import './App.css'
const treeData = [
    {
        title: '0-0',
        key: '0-0',
        // children: [
        //     {
        //         title: '0-0-0',
        //         key: '0-0-0',
        //         // disabled: true,
        //         children: [
        //             {
        //                 title: '0-0-0-0',
        //                 key: '0-0-0-0',
        //                 children:[
        //                     {
        //                         title: '0-0-0-0-0',
        //                         key: '0-0-0-0-0',
        //                         children:[
        //                             {
        //                                 title: '0-0-0-0-0-0',
        //                                 key: '0-0-0-0-0-0',
        //                                 // disabled: true,
        //                             }
        //                         ]
        //                     },
        //                     {
        //                         title: '0-0-0-0-1',
        //                         key: '0-0-0-0-1',
        //                     }
        //                 ]
        //             },
        //             {
        //                 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',
        //     },
        // ],
    },
    {
        title: '0-1',
        key: '0-1',
        children: [
            {
                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',
            },
        ],
    },
    {
        title: '0-2',
        key: '0-2-222222222',

    },
];
const App = () => {
    const [expandedKeys, setExpandedKeys] = useState(['0-0-0', '0-0-1']);
    const [autoExpandParent, setAutoExpandParent] = useState(true);

    const [checkedKeys, setCheckedKeys] = useState(['0-0-0']); //keys数组
    const [selectedKeys, setSelectedKeys] = useState([]);

    const onExpand = (expandedKeysValue) => {
        console.log('onExpand', expandedKeysValue);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        setExpandedKeys(expandedKeysValue);
        setAutoExpandParent(false);
    };
    const onCheck = (checkedKeysValue,a) => {

        console.log('onCheck--------checkedKeysValue', checkedKeysValue , a.checkedNodes.filter(item=>{
            return !item.children
        }));
        let checkLeefsValue = a.checkedNodes.filter(item=>{
            return !item.children
        })

        setCheckedKeys(checkedKeysValue);
        //?
        setRowData(checkLeefsValue)
    };
    const onSelect = (selectedKeysValue, info) => {
        console.log('onSelect', info);
        setSelectedKeys(selectedKeysValue);
    };
    const onButtonClick = ()=>{
        const res = mapTree(tree, rowData, {disabled: true});
        console.log('////', res,rowData);
        setTree([...res]);
        updateCardRowData([...rowData]);
    }

    const mapTree = (tree,rowData, {disabled}) => {
        const mapTreeHelper = (node) => {
            if (rowData.some((row) => row.key === node.key)) {
                node.disabled = disabled;
                node.keysReset = +new Date();
            }
            if (!node.children) return;
            node.children.forEach(item => mapTreeHelper(item));
        }
        tree.forEach(node => mapTreeHelper(node));
        return tree;
    }

    const deletefun = (delNode)=>{
        const res = mapTree(tree, [delNode], { disabled: false })
        console.log('delete', res);
        //t]ree的child的disable 1.删除 。改 rowdata ，row 2.改tree的disable。
        setTree([...res])
        setRowData(rowData.filter(old => old.key !== delNode.key))
        updateCardRowData(rowData.filter(old => old.key !== delNode.key));
    }

    const [tree, setTree] = useState(treeData); //为了重新渲染
    const [rowData,setRowData] = useState([]) // row是child叶子节点。
    const [cardRowData,updateCardRowData] = useState([])
    useEffect(()=>{
        console.log("row",rowData)//异步
    },[rowData])

    /**
     * const rollback = [];
     *
     */

    return (
        <div className="tree-select">
            <div className="tree-left">
                <div className="tree-left-top">项目选择</div>
                <div className="tree-left-corn">
                    <Tree
                        key={+new Date()}
                        checkable
                        onExpand={onExpand}
                        expandedKeys={expandedKeys}
                        autoExpandParent={autoExpandParent}
                        onCheck={onCheck}
                        checkedKeys={checkedKeys}
                        onSelect={onSelect}
                        selectedKeys={selectedKeys}
                        treeData={tree}
                    />
                </div>
            </div>
            <div className="tree-middle" onClick={ onButtonClick }>
                <Button/>
            </div>
            <div className="tree-right">
                <div className="tree-right-top">项目选择</div>
                <div className="tree-right-list">
                    <Card>
                        <ul>
                            {
                                  (cardRowData || []).map(item => <li key={item.key} >
                                    <span>{item.title}</span>
                                    <button onClick={() => {deletefun(item)}}> del </button>`
                                    </li> )
                            }
                        </ul>
                    </Card>
                </div>
            </div>
        </div>

    );
};
export default App;

2.App.css

.tree-select{
    width: 400px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}