How to get React to listen for a click event called in Jquery

Question

I'm using dabeng/OrgChart in a react app. When the user clicks on a node Jquery populates an input box. An example of this can be seen here.

I want react to do this instead of Jquery so I can save the selected node in state instead of the inputbox holding a value.

I've tried things like using references, tried to see if I can call a react method within the jquery function but no joy.

Maybe a publisher/subscriber model would be the solution but not sure how to implement something like that.

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");
    }

I want to see this.onNodeSelected() called when a node is clicked.

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

Thanks in advance for any help you can give me on this.

Answer 1

IMO you're already committed to using jQuery with this library. So I don't see why you can't just do something like this let's say:

    //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({})
    });

Since, this isn't within your requirements I should say that the reason I suggest this is because the DOM appears to be generated by the orgChart library and adding react listeners to that is difficult. And there isn't any reason why you can't call react setState inside a jQuery click function.

It would also be wrong of me to suggest this without adding the warning that jQuery and React are both pretty large libraries that do largely similar-ish things. You probably already know that but, I still want to suggest finding a different organization library or make your own with React.