您好，我在react上集成jsmind的时候，选择了一个节点，然后点击添加节点的时候，提示未选择节点，我跟踪分析了下，在_event_bind的回调也没有被调用，辛苦帮忙看下

[kkWork00]

import React, { useEffect, useRef, useState } from 'react';
import 'jsmind/style/jsmind.css'; // 引入 jsMind 的样式
import jsMind from 'jsmind'; // 默认导入
// import 'jsmind/draggable-node'
// import 'jsmind/screenshot'
// import 'jsmind/es6/jsmind.draggable-node.js';
// import 'jsmind/es6/jsmind.screenshot.js';

// import screenshot from 'jsmind/es6/jsmind.screenshot.js';
// import draggable-node from 'jsmind/es6/jsmind.draggable-node.js';

// 定义思维导图数据
const mindData = {
meta: {
name: 'jsMind-demo-tree',
author: 'hizzgdev@163.com',
version: '0.2'
},
format: 'node_tree',
data: {
id: 'root',
topic: 'jsMind',
children: [
{
id: 'easy',
topic: 'Easy',
direction: 'left',
expanded: false,
children: [
{ id: 'easy1', topic: 'Easy to show' },
{ id: 'easy2', topic: 'Easy to edit' },
{ id: 'easy3', topic: 'Easy to store' },
{ id: 'easy4', topic: 'Easy to embed' }
]
},
{
id: 'open',
topic: 'Open Source',
direction: 'right',
expanded: true,
children: [
{ id: 'open1', topic: 'on GitHub' },
{ id: 'open2', topic: 'BSD License' }
]
},
{
id: 'powerful',
topic: 'Powerful',
direction: 'right',
children: [
{ id: 'powerful1', topic: 'Base on Javascript' },
{ id: 'powerful2', topic: 'Base on HTML5' },
{ id: 'powerful3', topic: 'Depends on you' }
]
},
{
id: 'other',
topic: 'test node',
direction: 'left',
children: [
{ id: 'other1', topic: "I'm from local variable" },
{ id: 'other2', topic: 'I can do everything' }
]
}
]
}
};

const MindMapView = ({ strategies, onDelete, onEdit, onSelectStrategy }) => {
const mindMapContainer = useRef(null);
const jmInstance = useRef(null);
const [selectedNode, setSelectedNode] = useState(null);
const [newNodeTopic, setNewNodeTopic] = useState('');
const [editNodeTopic, setEditNodeTopic] = useState('');

useEffect(() => {
    if (mindMapContainer.current && !jmInstance.current) {
        const options = {
            container: mindMapContainer.current,
            theme: 'greensea',
            editable: true,
            log_level: 'debug',
            enable_dblclick_handle: false,
            view: {
                engine: 'svg',
                draggable: true,
                enable_device_pixel_ratio: false,
            },
            // plugin: {
            //     screenshot: {
            //         background: '#ffffff',
            //     },
            // },
        };

        const jm = new jsMind(options);
        jm.show(mindData);
        jmInstance.current = jm;
        mindMapContainer.current.addEventListener('click', () => {
            console.log('容器被点击了');
        });
        // 选择根节点作为初始选中节点
        const rootNode = jm.get_root();
        setSelectedNode(rootNode);
        if (onSelectStrategy) onSelectStrategy(rootNode);

        // 定义事件处理回调
        // const handleJsMindEvent = (type, data) => {
        //     console.log('接收到事件: ', type);
        //     if (type === jsMind.event_type.select) {
        //         const nodeId = data.node;
        //         const node = jm.get_node(nodeId);
        //         if (node) {
        //             setSelectedNode(node);
        //             console.log('选中了节点：', node.topic);
        //             if (onSelectStrategy) onSelectStrategy(node);
        //         } else {
        //             console.warn(`未找到节点 ID: ${nodeId}`);
        //         }
        //     } else if (type === jsMind.event_type.edit) {
        //         const evt = data.evt;
        //         if (evt === 'update_node' || evt === 'edit_node') {
        //             const nodeId = data.node;
        //             const newTopic = Array.isArray(data.data) ? data.data[1] : '';
        //             const node = jm.get_node(nodeId);
        //             if (node) {
        //                 setSelectedNode(node);
        //                 console.log('节点已编辑：', newTopic);
        //                 if (onEdit) onEdit({ ...node, topic: newTopic });
        //             } else {
        //                 console.warn(`未找到节点 ID: ${nodeId}`);
        //             }
        //         }
        //     }
        // };
        //
        // // 注册事件监听器
        // jm.add_event_listener(handleJsMindEvent);

        // setTimeout(() => {
        //     jm.select_node('open'); // 确保 'open' 节点存在
        // }, 1000);

        // 清理函数，组件卸载时销毁 jsMind 实例
        return () => {
            if (jmInstance.current) {
                jmInstance.current.clear_event_listener();
                // 假设 jsMind 提供 destroy 方法，如果没有需要确认或自行实现
                if (typeof jmInstance.current.destroy === 'function') {
                    jmInstance.current.destroy();
                }
                jmInstance.current = null;
            }
        };
    }
}, []);

/**
 * 添加子节点
 */
const handleAddNode = () => {
    const jm = jmInstance.current;
    if (!jm) return;

    const selected_node = jm.get_selected_node(); // 作为新节点的父节点
    if (!selected_node) {
        alert('请先选择一个节点添加子节点。');
        return;
    }

    const nodeid = jsMind.util.uuid.newid();
    const topic = newNodeTopic.trim() || `* Node_${nodeid.substr(nodeid.length - 6)} *`;
    const node = jm.add_node(selected_node, nodeid, topic);

    if (node) {
        setNewNodeTopic('');
        setSelectedNode(node);
        if (onSelectStrategy) onSelectStrategy(node);
        console.log(`添加了新节点：${node.topic}`);
    } else {
        alert('添加节点失败，节点 ID 可能已经存在。');
    }
};

/**
 * 删除选中的节点
 */
const handleDeleteNode = () => {
    const jm = jmInstance.current;
    if (!jm) return;

    if (!selectedNode) {
        alert('请先选择一个节点进行删除。');
        return;
    }
    if (selectedNode.id === 'root') {
        alert('无法删除根节点。');
        return;
    }

    const confirmed = window.confirm(`确定要删除节点 "${selectedNode.topic}" 吗？`);
    if (!confirmed) return;

    const removed = jm.remove_node(selectedNode.id);
    if (removed) {
        if (onDelete) onDelete(selectedNode);
        setSelectedNode(null);
        console.log(`删除了节点：${selectedNode.topic}`);
    } else {
        alert('删除节点失败。');
    }
};

/**
 * 编辑选中的节点
 */
const handleEditNode = () => {
    const jm = jmInstance.current;
    if (!jm) return;

    if (!selectedNode) {
        alert('请先选择一个节点进行编辑。');
        return;
    }
    if (!editNodeTopic.trim()) {
        alert('请输入节点的新主题。');
        return;
    }

    jm.update_node(selectedNode.id, editNodeTopic.trim());
    setEditNodeTopic('');
    console.log(`已更新节点 "${selectedNode.id}" 的主题为：${editNodeTopic.trim()}`);
};

return (
    <div>
        <div style={{ marginBottom: '10px', display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
            <button onClick={handleAddNode} style={{ marginRight: '5px' }}>
                添加节点
            </button>
            <input
                type="text"
                placeholder="新节点主题"
                value={newNodeTopic}
                onChange={(e) => setNewNodeTopic(e.target.value)}
                style={{ marginRight: '10px', flex: '1 0 150px' }}
            />
            <button
                onClick={handleDeleteNode}
                disabled={!selectedNode || selectedNode.id === 'root'}
                style={{ marginRight: '5px' }}
            >
                删除节点
            </button>
            <button
                onClick={handleEditNode}
                disabled={!selectedNode || !editNodeTopic.trim()}
                style={{ marginRight: '5px' }}
            >
                编辑节点
            </button>
            <input
                type="text"
                placeholder="编辑节点主题"
                value={editNodeTopic}
                onChange={(e) => setEditNodeTopic(e.target.value)}
                style={{ flex: '1 0 150px' }}
            />
        </div>
        <div
            ref={mindMapContainer}
            style={{ width: '100%', height: '600px', border: '1px solid #ccc', borderRadius: '4px' }}
        ></div>
    </div>
);

};

export default MindMapView;

[hizzgdev]

@kkWork00 你好，面对粘贴大段代码其实很难能帮你调试，不如你做一个最简单的页面，单独验证这个问题可能更容易分析一些。

[kkWork00]

好的，谢谢您的回复

…

---原始邮件--- 发件人: "Zhigang ***@***.***> 发送时间: 2025年3月10日(周一) 下午5:23 收件人: ***@***.***>; 抄送: ***@***.******@***.***>; 主题: Re: [hizzgdev/jsmind] 您好，我在react上集成jsmind的时候，选择了一个节点，然后点击添加节点的时候，提示未选择节点，我跟踪分析了下，在_event_bind的回调也没有被调用，辛苦帮忙看下 (Discussion #640) @kkWork00 你好，面对粘贴大段代码其实很难能帮你调试，不如你做一个最简单的页面，单独验证这个问题可能更容易分析一些。 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>