如何使用@naisutech/tree tree中的onSelect回调

Question

我正在使用@naisutech/react插件，我可以在我的代码中使用这个示例。树将被显示并正确操作。我尝试了theme属性，它运行良好。我只是不能让onSelect回调开始工作。我现在只是在做一个console.log(props)。

我尝试了一个不同的树作为一个测试和树(从‘react简单-树菜单’导入TreeMenu )，‘单击’回调工作正常。

我尝试在RecipePage类中使用一种方法，我尝试了一个‘内联’函数。所有的东西似乎都是“编译”的，但是我从来没有看到过来自@naisutech树的控制台消息，我确实看到了来自react简单树菜单的控制台日志消息。

我查看了@naisutech代码it和对我来说(我对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>
    );
}

Answer 1

在传递函数时调用它，只需要传递它的引用。

将其更改为onSelect={onSelect}，将在触发事件时调用传递的函数。

编辑-我刚刚证实，onSelect是正确的道具。

沙箱连接