国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

最終的渲染只在于數(shù)據(jù)是怎么樣的，在數(shù)據(jù)的改變在于你自己的控制啊，允許不允許，不過是數(shù)據(jù)是否改變而已了。

比如下面的代碼， 子節(jié)點 只能放到 第三個 下面，不能放到 第一個 下面（因為我的邏輯就是這樣的）。

import * as React from 'react';
import {BaseComponent} from '../base';
import Tree from 'antd/lib/tree';
const TreeNode = Tree.TreeNode;
import 'antd/lib/tree/style/index.css';


export interface HeaderProps { }
export interface HeaderState { data: any }

export class Header extends BaseComponent<HeaderProps, HeaderState> {
    state = {
        data: [
            {name: '第一個', key: 'a'},
            {name: '第二個', key: 'b',
                children: [
                    {name: '子節(jié)點', key: 'd'}
                ]},
            {name: '第三個', key: 'c'}
        ]
    };

    constructor(props:HeaderProps) {
        super(props);
    }

    onDragEnter(opt){
        console.log(opt, 'x');
    }

    onDrop(opt){
        const fromNode = opt.dragNode.props.eventKey;
        const toNode = opt.node.props.eventKey;
        if(toNode !== 'c'){ return }
        this.state.data[2]['children'] = this.state.data[1]['children'];
        this.state.data[1]['children'] = [];
        this.setState({});
    }

    loop(data){
        return data.map( d => {
            if(d.children && d.children.length){
                return <TreeNode key={d.key} title={d.name}>{this.loop(d.children)}</TreeNode>
            } else {
                return <TreeNode key={d.key} title={d.name}></TreeNode>
            }
        })
    }

    render() {
        return (<p>
            <Tree className="draggable-tree"
                draggable
                onDragEnter={this.onDragEnter.bind(this)}
                onDrop={this.onDrop.bind(this)}>
                {this.loop(this.state.data)}
            </Tree>
        </p>)
    }
}