Asp.net mvc 从Jquery树事件设置React Props和state

我对这个世界还不熟悉。在我的项目中，现在我开始在现有的.NETMVC项目中使用react。我现在面临的问题是，我有一个基于Jquery/JS的树，它是从react类组件的ComponentDidMount填充的。这个JS treethird party JS插件有一个on select事件，我需要从中设置该组件的状态和道具。我无法从JQuery树的select事件调用React组件的eventHandler。请帮忙

import React, { Component } from 'react'

class ReportsTree extends React.Component {

    constructor(props) {
        super(props)

        this.handleTreeNodeSelect = this.handleTreeNodeSelect.bind(this);
    }



    componentDidMount() {
        var tree = this.loadReportsTree();

        tree.on('nodeDrop', function (e, id, parentId, orderNumber) {

            // console.log("ID : " + id + " Parent :" + parentId + " OrderNumber :" + orderNumber);

            if (parentId != undefined && parentId.indexOf('R') > -1) {
                return false;
            }
        });

        tree.on('nodeDataBound', function (e, node, id, record) {
            //console.log(record)
            if (record.parentid === null || record.parentid === '') {
                tree.expand(node);
            }
        });

        tree.on('select', function (e, node, id) {

            this.handleTreeNodeSelect(id); //THIS LOC IS NOT WORKING - Unable to find handleTreeNodeSelect event handler
        });
    }

    state = {

        id: ''

    }

    handleTreeNodeSelect = (_id) => {
        this.props.NodeTypeDetails(this.state.id = _id);
        this.setState(() => { return { id: _id } });
    };



    loadReportsTree() {

        var tree = $('#ssrTree').tree({
            uiLibrary: 'bootstrap',
            dataSource: '/GetReportItems',
            primaryKey: 'id',
            imageUrlField: 'imageUrl',
            dragAndDrop: true,

        });

        return tree;



    }



    render() {
        return (<div className="reportsTreeContainer">
            <div id="ssrTree"></div>           
        </div>)
    }
}

export default ReportsTree

---

我认为不建议混合使用react和jquery。但这对你来说是必须的，然后你可以像这样改变你的组件

componentDidMount() {
    const self = this;
    var tree = self.loadReportsTree();
    ...
    tree.on('select', function (e, node, id) {

        self.handleTreeNodeSelect(id); // the difference is to use self instead of this
    });
}

---

这里的关键是保存对您的this的引用，这是一个原始的react组件，然后在您的事件处理程序onSelect上，它可以具有预期的this。

树。在“选择”上，this.handlegreenodeselect

---

我从树中传递事件处理程序，以进行如上所述的反应。对不起，伙计们，我之前没试过

我自己解决了这个问题，我替换了事件处理程序树；谢谢你的评论。我尝试了此-0树。在“选择”上，此.handleTreeNodeSelect；，你找到了一个解决办法，真是太好了