javascript - komponen Pokok antd, adakah ia menyokong sekatan seret dan lepas?

Question

Apabila menyeret komponen Tree, saya ingin menyekat nod induk daripada diseret ke tahap nod anak, yang bermaksud hanya nod anak boleh diseret ke atas. Bolehkah ini disokong oleh antd?

Answer 1

Perenderan akhir hanya bergantung pada rupa data Perubahan data adalah di bawah kawalan anda sendiri sama ada ia dibenarkan atau tidak hanyalah soal sama ada data itu berubah.

Sebagai contoh, kod berikut, 子节点 只能放到 第三个 下面，不能放到 第一个 di bawah (kerana ini logik saya).

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: '子节点', 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>)
    }
}