Javascript 如何使用@naisutech/react树中的onSelect回调

我正在使用@naisutech/react-tree插件，我可以在我的代码中使用示例。该树将显示并正确运行。我尝试了

主题

属性，效果不错。我就是无法让

onSelect

回调正常工作。我现在只是在做一个

console.log（道具）

。
我尝试了一个不同的树作为测试，该树（从“react simple tree menu”（反应简单树菜单）导入TreeMenu）“click”（单击）回调正常工作

我试过在RecipePage类中使用一个方法，我试过一个“内嵌”函数。一切似乎都是“编译”的，但我从未从@naisutech树中看到控制台消息，我确实从react simple tree菜单中看到控制台日志消息

我查看了@naisutech代码，对我来说（我对React一无所知，刚刚开始）该属性是

selectNode

，或者可能是

selectedNode

而不是

onSelect

，正如文档所述，但我没有尝试过

我的代码很简单：

import React, { Component } from "react";
import TreeMenu from 'react-simple-tree-menu'
import Tree from '@naisutech/react-tree'
import './RecipePage.css';

function onSelect (props)  {
    console.log(props);
}

class RecipePage extends Component {

onclickTree(props) {
    console.log(props);
}

onclickTree2(props) {
    console.log(props);
}

render() {

    const nodes = [
       {
           label: 'Node',
           id: 1234,
           parentId: null,
           items: [
             {
                 label: 'File',
                 parentId: 1234,
                 id: 5678
             }
           ]
       },
       {
           label: 'Child node 1',
           id: 1236,
           parentId: 1234,
           items: null
       },
       {
           label: 'Child node 2',
           id: 5678,
           parentId: 1234,
           items: [
             {
                 label: 'File 1',
                 parentId: 5678,
                 id: 7890
             }
           ]
       },
       {
           label: 'Node',
           id: 1235,
           parentId: null,
           items: null
       }
    ]

    const myTheme = {
        'my-theme': {
            text: '#fff', 
            bg: '#000',
            highlight: 'blue', // the colours used for selected and hover items
            decal: 'green', // the colours used for open folder indicators and icons
            accent: '#999' // the colour used for row borders and empty file indicators
        }
    }

    return(
        <div id="recipePage" className="RecipeMenu" >
            <div className="closeButton" zstyle="border-style:solid; border-color:green; border-width:thin;" >
               <img src={require('./../CommonImages/closeButton_W_90x90.png')} height="90px" onClick={() => this.props.close()} alt="Menu buttons"></img>
                <TreeMenu data={treeData2} onClickItem = {onSelect()} />
                   <Tree nodes={nodes} selectNode={onSelect()} theme = {'my-theme'} customTheme={myTheme} />
            </div>
        </div>
    );
}

import React，{Component}来自“React”；
从“反应简单树菜单”导入树菜单
从“@naisutech/react Tree”导入树
导入“/RecipePage.css”；
功能选择（道具）{
控制台日志（道具）；
}
类RecipePage扩展组件{
onclickTree（道具）{
控制台日志（道具）；
}
onclickTree2（道具）{
控制台日志（道具）；
}
render（）{
常量节点=[
{
标签：“节点”，
身份证号码：1234，
parentId:null，
项目：[
{
标签：“文件”，
父ID:1234，
身份证号码：5678
}
]
},
{
标签：“子节点1”，
id:1236，
父ID:1234，
项目：空
},
{
标签：“子节点2”，
身份证号码：5678，
父ID:1234，
项目：[
{
标签：“文件1”，
家长编号：5678，
身份证号码：7890
}
]
},
{
标签：“节点”，
身份证号码：1235，
parentId:null，
项目：空
}
]
常数myTheme={
“我的主题”：{
正文：“#fff”，
背景：“#000”，
突出显示：“蓝色”//用于选定和悬停项目的颜色
贴花：“绿色”//用于打开文件夹指示器和图标的颜色
重音：'#999'//用于行边框和空文件指示符的颜色
}
}
返回(
this.props.close（）}alt=“菜单按钮”>
);
}

传递函数时调用函数，只需传递其引用即可

将其更改为

onSelect={onSelect}

，触发事件时将调用传递的函数

编辑-我刚刚验证，

onSelect

是正确的道具

---

谢谢，我现在记得其他新手也犯了同样的错误。我猜另一个树onClick也是错误的，但是他们的代码中必须有一个控制台；我以为是我的，我试过你的沙盒代码，没问题。我更改了console.log消息，以向自己证明它确实被调用了，并且起到了作用……但是更改为onSelect={onSelect}没有帮助。我曾尝试将“树”从沙箱中放入另一个更简单的react应用程序中，但由于某些原因，“onSelect”仍然不起作用。树按预期展开，但我没有看到我的console.log消息。我想知道我是否没有正确设置有关console.log的内容。我在onSelect函数中放置了“debugger；”，当我单击树时，代码在该点停止。因此，我猜我的console.log消息已被使用或隐藏在我的视图中。