如何使用 react-sortable-tree 使节点不可拖动

Question

我正在使用react-sortable-tree。

我添加了一些按钮：

• 编辑：更改名称。
• add：添加孩子。
• remove：删除选定的子节点。
• 其他：添加自定义子项。

我想知道如何使某些节点不可拖动，我已阅读文档但我做不到。

有人可以帮我吗？

这是我的代码：

export default class DragTree extends Component<TreeProps, TreeState> {
    constructor(props: TreeProps) {
        super(props);
        const { expanded, data } = this.props;
        const treeWithExpandedProp: Object[] = toggleExpandedForAllWithParams(
            [data],
            expanded
        );
        this.state = {
            selectedNode: null,
            edit: false,
            addAsFirstChild: false,
            treeData: treeWithExpandedProp,
            showModal: false,
            getNodeKey: () => {},
            path: [],
        };
    }

    addItem = (getNodeKey: Function, path: Array<number>) => {
        const { treeData } = this.state;
        const newNode = { label: "Item" };
        const updatedState: any = addNodeUnderParentWithParams(
            treeData,
            newNode,
            path[path.length - 1],
            getNodeKey,
            false,
            this.state.addAsFirstChild
        );
        const newState: Object[] = updatedState.treeData;
        this.setState({ treeData: newState });
    };

    addTagItem = (getNodeKey: Function, path: Array<number>) => {
        this.setState({ getNodeKey: getNodeKey, path: path, showModal: true });
    };

    editItem = (node: any) => {
        this.setState({ edit: !this.state.edit, selectedNode: node.id });
    };

    removeItem = (getNodeKey: Function, path: Array<number>) => {
        const { treeData } = this.state;
        const updatedTreeData: Object[] = removeNodeAtPathWithParams(
            treeData,
            path,
            getNodeKey
        );
        this.setState({ treeData: updatedTreeData });
    };

//这里我要添加一个不能拖动的新节点

    onHandleAccept = (option: string) => {
        const { treeData, getNodeKey, path } = this.state;
        const newNode = { label: option };
        const updatedState: any = addNodeUnderParentWithParams(
            treeData,
            newNode,
            path[path.length - 1],
            getNodeKey,
            false,
            this.state.addAsFirstChild
        );
        const updatedTreeData: Object[] = updatedState.treeData;
        this.setState({
            treeData: updatedTreeData,
            getNodeKey: () => {},
            path: [],
            showModal: false,
        });
    };

    onHandleCancel = () => {
        this.setState({ getNodeKey: () => {}, path: [], showModal: false });
    };

    render() {
        const { options } = this.props;
        const { showModal } = this.state;
        const getNodeKey = ({ treeIndex }: ItreeIndex): number => treeIndex;
        return (
            <React.Fragment>
                {showModal && (
                    <div className="modal-drag-tree">
                        <ModalDragTree
                            options={options}
                            onCancel={this.onHandleCancel}
                            onAccept={this.onHandleAccept}
                        />
                    </div>
                )}
                <div className="multiple-tree">
                    <SortableTree
                        canDrag={true}
                        treeData={this.state.treeData}
                        onChange={(treeData: any) =>
                            this.setState({ treeData })
                        }
                        generateNodeProps={({ node, path }: INodeProps) => {
                            const typeIcon: string = getTypeIcon(node.icon);
                            if (
                                typeIcon !== EMPTY &&
                                typeIcon.toLowerCase() === DMA_ICON
                            ) {
                                return {
                                    title: this.state.edit &&
                                        node.id === this.state.selectedNode && (
                                            <input
                                                className="multiple-input-tree"
                                                value={node.name}
                                                onKeyDown={(event: any) => {
                                                    if (event.keyCode === 13) {
                                                        this.setState({
                                                            edit: false,
                                                            selectedNode: null,
                                                        });
                                                    }
                                                }}
                                                onChange={(event: any) => {
                                                    const label: string = String(
                                                        event.target.value
                                                    );
                                                    const {
                                                        treeData,
                                                    } = this.state;
                                                    const result: Object[] = changeNodeAtPathWithParams(
                                                        treeData,
                                                        path,
                                                        { ...node, label },
                                                        getNodeKey
                                                    );
                                                    this.setState({
                                                        treeData: result,
                                                    });
                                                }}
                                            />
                                        ),
                                    buttons: [
                                        <i
                                            className="icon-pencil fontello-custom-button"
                                            onClick={() => this.editItem(node)}
                                        />,
                                        <i
                                            className="icon-plus-squared-alt fontello-custom-button"
                                            onClick={() =>
                                                this.addItem(getNodeKey, path)
                                            }
                                        />,
                                        <i
                                            className="icon-trash-empty fontello-custom-button"
                                            onClick={() =>
                                                this.removeItem(
                                                    getNodeKey,
                                                    path
                                                )
                                            }
                                        />,
                                        <i
                                            className="icon-tag fontello-custom-button"
                                            onClick={() =>
                                                this.addTagItem(
                                                    getNodeKey,
                                                    path
                                                )
                                            }
                                        />,
                                    ],
                                };
                            } else {
                                return {
                                    title: "",
                                    buttons: [
                                        <i
                                            className="icon-plus-squared-alt fontello-custom-button"
                                            onClick={() =>
                                                this.addItem(getNodeKey, path)
                                            }
                                        />,
                                    ],
                                };
                            }
                        }}
                    />
                </div>
            </React.Fragment>
        );
    };
}

Answer 1

很简单！！

我创建了一个函数来决定它是否可拖动。

render() {
    const { options } = this.props;
    const { showModal } = this.state;
    const getNodeKey = ({ treeIndex }: ItreeIndex): number => treeIndex;
    const canDrag = ({ node }: any) => {
    const typeIcon: string = getTypeIcon(node.icon);
        if (typeIcon !== EMPTY && typeIcon.toLowerCase() === DMA_ICON) {
            return true;
        } else {
            return false;
        }
    };
    return (
        <React.Fragment>
            {showModal && (
                <div className="modal-drag-tree">
                    <ModalDragTree
                        options={options}
                        onCancel={this.onHandleCancel}
                        onAccept={this.onHandleAccept}
                    />
                </div>
            )}
            <div className="drag-tree">
                <SortableTree
                    canDrag={canDrag}
                    treeData={this.state.treeData}
                    onChange={(treeData: any) =>
                        this.setState({ treeData })
                    }
                    generateNodeProps={({ node, path }: INodeProps) => {
                        ...
                    }}
                />
            </div>
        </React.Fragment>
    );
}