Question

抱歉，但我不太了解参考资料。我一直在阅读react doc，但我不知道在检查项目时如何创建一个ref数组并访问一个节点。

我的想法是参考所有树节点，当调用onCheck访问当前参考和更改属性时，使用childNodes {{1}使用javascript将其父项和他的子项检查到当前项的不同状态}，parentNode和nextSibling。

previousSibling

Answer 1

您可以使用React.createRef之类的

，而不是使用ref callback

constructor(props) {
   super(props);
   this.myRef = {};
}
onCheck = (checkedKeys, event) => {
   how can get node checked??? it always returns last node 
   const checkedKey = // get the checkedKey here, if its a array, loop and use
   const node = this.myRef[checkedKey];
   console.log(node)
}

render() {
    const loop = (data) => {
        return data.map((item, index) => {
            if (item.children && item.children.length) {
                return <TreeNode ref={(ref) => this.myRef[key] = ref} title={item.name} key={item.key} checked={item.checked} >{loop(item.children)}</TreeNode>;
            }
            return (
                <TreeNode ref={(ref) => this.myRef[key] = ref} title={item.name} key={item.key} isLeaf={item.isLeaf} checked={item.checked}  />
            );
        });
    };
    return (
        <div className="draggable-container">
            <Tree
                // Expand
                expandedKeys={this.state.expandedKeys}
                onExpand={this.onExpand} autoExpandParent={this.state.autoExpandParent}
                // Draggable
                draggable
                onDragStart={this.onDragStart}
                onDragEnter={this.onDragEnter}
                onDrop={this.onDrop}
                // Select && Check
                onSelect={this.onSelect}
                checkable onCheck={this.onCheck} checkedKeys={this.state.checkedKeys} >
                { loop(this.state.treeData) }
            </Tree>
        </div>  
    );
}

Answer 2

这是我的解决方案，因为我必须修改treeData：

onCheck = (checkedKeys, event) => {
    // console.log(this.treeData);
    const checkedKey = event.node.props.eventKey;
    this.updateItemChecked(checkedKey);
    this.setState({ checkedKeys: checkedKeys }, () => {
        this.props.parentTree(this.treeData);
    });
}

updateItemChecked = (key) => {
    var result = getNodeByKey(key, this.treeData);
    if (result.type.localeCompare('folder') !== 0) {
        if (result.checked === true ) {
            result.checked = false;
        } else {
            result.checked = true;     
        }
    } else {
        this.checkIfFolderHasItem(result);
    }

}

checkIfFolderHasItem = (result) => {
    if ( result.children && result.children.length > 0) {
        result.children.forEach( (item) => {
            if (item.type.localeCompare('folder') !== 0) {
                this.updateItemChecked(item.key);
            } else {
                this.checkIfFolderHasItem(item);
            }
        });
    }
}

// Expand
onExpand = (expandedKeys, event) => {
    // console.log('onExpand', expandedKeys);
    const checkedKey = event.node.props.eventKey;
    this.updateFolderExpanded(checkedKey);
    this.setState({ expandedKeys, autoExpandParent: false }, ()=> {
        this.props.parentTree(this.treeData);
    });
}

updateFolderExpanded = (key) => {
    var result = getNodeByKey(key, this.treeData);
    if (result.type.localeCompare('folder') === 0) {
        if (result.expanded === true ) {
            result.expanded = false;
        } else {
            result.expanded = true;     
        }
    }
}

render() {
    const loop = (data) => {
        return data.map((item) => {
            if (item.children && item.children.length) {
                return <TreeNode title={item.name} key={item.key} checked={item.checked} >{loop(item.children)}</TreeNode>;
            }
            return (
                <TreeNode title={item.name} key={item.key} isLeaf={item.isLeaf} checked={item.checked}  />
            );
        });
    };
    return (
        <div className="draggable-container">
            { 
                // (this.state.showModal) ? <TreeModal show={this.state.showModal} info={this.state.selected} treeData={this.state.treeData} parentTreeModal={this.doParentTreeModal} /> : null 
            }
            <Tree
                // Expand
                expandedKeys={this.state.expandedKeys}
                onExpand={this.onExpand} autoExpandParent={this.state.autoExpandParent}
                // Draggable
                draggable
                onDragStart={this.onDragStart}
                onDragEnter={this.onDragEnter}
                onDrop={this.onDrop}
                // Select && Check
                onSelect={this.onSelect}
                checkable onCheck={this.onCheck} checkedKeys={this.state.checkedKeys} >
                { loop(this.state.treeData) }
            </Tree>
        </div>  
    );
}

JSON示例：

[
    {
        "name": "Capas1",
        "key": "0-23",
        "isLeaf": false,
        "type": "folder",
        "expanded": true,
        "children": [{
                "name": "sectores",
                "key": "0-20",
                "isLeaf": true,
                "type": "layer",
                "checked": true
            },
            {
                "name": "distribucion",
                "key": "0-22",
                "isLeaf": true,
                "type": "layer",
                "checked": false
            }]
    }, 
    {
        "name": "Nueva Carpeta0",
        "key": "0-624",
        "isLeaf": false,
        "type": "folder",
        "expanded": false,
        "checked": false
    },
    {
        "name": "Nueva Carpeta1",
        "key": "0-625",
        "isLeaf": false,
        "type": "folder",
        "expanded": true,
        "children": [{
                "name": "Nueva Carpeta2",
                "key": "0-629",
                "isLeaf": false,
                "type": "folder",
                "expanded": true,
                "children": [{
                    "name": "Nueva Carpeta3",
                    "key": "0-623",
                    "isLeaf": false,
                    "type": "folder",
                    "expanded": true,
                    "children": [{
                        "name": "distribucion33",
                        "key": "0-99",
                        "isLeaf": true,
                        "type": "layer",
                        "checked": true
                    }]
                }]
            }]
    },
    {
        "name": "sectores1",
        "key": "0-27",
        "isLeaf": true,
        "type": "layer",
        "checked": true
    },
    {
        "name": "sectores12",
        "key": "0-89",
        "isLeaf": true,
        "type": "layer",
        "checked": false
    },
    {
        "name": "Capas 2",
        "key": "0-588",
        "isLeaf": false,
        "type": "folder",
        "expanded": false,
        "children": [{
            "name": "Capas 3",
            "key": "0-589",
            "isLeaf": false,
            "type": "folder",
            "expanded": false,
            "children": [{
                "name": "Prueba",
                "key": "0-36",
                "isLeaf": true,
                "type": "layer",
                "checked": false
                }]
            }]
    }
]

如何使用ref访问当前节点

2 个答案: