Javascript 如何让React监听Jquery中调用的click事件

我在react应用程序中使用。当用户单击节点时，Jquery将填充一个输入框。我们可以看到这样一个例子

我希望react执行此操作，而不是Jquery，这样我就可以将所选节点保存为状态，而不是保存值的inputbox

我尝试过使用引用之类的方法，试图看看是否可以在jquery函数中调用react方法，但没有乐趣

也许a是解决方案，但不确定如何实现类似的功能

class OrgTreeBase extends Component {
    state = {
        list: {
            'name': 'Ball game',
            'children': [
                {
                    'name': 'Football',
                    'children': [
                        {
                            'name': 'man united',
                            'children': [
                                { 'name': 'fred' },
                                { 'name': 'ander herrera' },
                                { 'name': 'scott mctominay' },
                            ]
                        }
                    ]
                },
                {
                    'name': 'Basketball',
                    'children': [
                        {'name': 'lakers'},
                        { 'name': 'warriors' },

                    ]
                },
                { 'name': 'Volleyball' }
            ]
        },
        currentLevel: 0,
        currentItem: [],
        selectedItem: '',
    };

    componentDidMount() {
        this.$el = $(this.el);
        let datasource = this.state.list;

        this.getId = () => {
            return (new Date().getTime()) * 1000 + Math.floor(Math.random() * 1001);
        }

        //creates the initial chart with the following settings
        var oc = $('#chart-container').orgchart({
            'data': datasource,
            'chartClass': 'edit-state',
            'exportButton': true,
            'exportFilename': this.state.name,
            'parentNodeSymbol': 'fa-th-large',
            'createNode': function ($node, data) {
                $node[0].id = this.getId;
            },
        })

        //when node is selected
        oc.$chartContainer.on('click', '.node', function () {
            var $this = $(this);
            console.log("this is : " + $this.find('.title').text());
            $('#selected-node').val($this.find('.title').text()).data('node', $this);
        });

...

    onNodeSelected = (node) => {
        console.log(node + " was selected");
    }

我希望看到在单击节点时调用.onNodeSelected（）

    onNodeSelected = (node) => {
        console.log(node + " was selected");
    }

---

提前感谢您在这方面给予我的任何帮助。

在我看来，您已经承诺将jQuery用于此库。所以我不明白为什么你不能做这样的事情，比如说：

    //somewhere above
    const self = this;

    //when node is selected
    oc.$chartContainer.on('click', '.node', function () {
        var $this = $(this);
        console.log("this is : " + $this.find('.title').text());
        $('#selected-node').val($this.find('.title').text()).data('node', $this);

        //set state and save node here on click. Or the node's text value 
        self.setState({})
    });

因为，这不符合您的要求，所以我建议这样做的原因是，DOM似乎是由orgChart库生成的，向其中添加react侦听器很困难。没有任何理由不能在jQuery click函数中调用react setState

---

如果我没有警告jQuery和React都是相当大的库，它们做的事情基本上是相似的，那么我建议这样做也是错误的。你可能已经知道了，但我还是想建议你找一个不同的组织库，或者用React创建自己的组织库

我会尝试用react组件包装组织结构图。谢谢Michael。成功了。我知道他们两个都不一样，我确实计划自己做一个，但在我投入时间做类似的事情之前，我想先把我的想法原型化。