React, update state on an event from a third party control

Question

I have a react component InfoPanel that I want to update the state of when I click on a third party control gantt chart. I have only done this with flux to allow components to communicate with each other. I am not sure how to change the state of the InfoPanel Component when the third party control event onTaskClickfires.

Here is the event that fires for the third party control.

class InfoPanelService {
    constructor() {
        this.InitInfoPanel();

    }

    OnTaskClick() {
        //event from a third party control
        gantt.attachEvent("onTaskClick", function (id, e) {
            var tasks = gantt.getTaskByTime();
            var task = tasks[id];

            //determine the task type and get the data

            return true;
        });
    }
    InitInfoPanel() {
        this.OnTaskClick();
    }
}

Here is my InfoPanel component

var InfoPanel = React.createClass({
    getInitialState: function () {
        return { data: {
            project: {},
            subProject: {},
            activity: {}
        } };
    },

    render: function() {
        return (<div>
                    ...tables with the state values
                    ... too long to post
               </div>

          );
    }

});

Should I add something like this to my component? <InfoPanel OnTaskClick = infoPanelService.OnTaskClick /> instead of attaching the event right away inside of the constructor and pass in that function from the service as props? This way the component is completely dumb and I can easily throw it and reuse it.

onResourceSelect() {
    this.props.OnTaskClick();
},

Answer 1

My suggestion would be to wait till the component is mounted tehn proceed like this since it is a custom/3rd party triggered event:

componentDidMount() {
    //component is mounted/inserted to DOM, 
    // Attach your 3td party/custom event listener
    this.getDOMNode().addEventListener("onTaskClick", ()=>{/*handle it here*/});
  }