0

I'm using a library to render a Gantt Chart. This Chart provides an js event to handle a button click. I need to route or render another react component in that event. So... how can i render o route to my component in that event? I'm using react router and meteor.

render() {
gantt.config.buttons_left=["dhx_save_btn","dhx_cancel_btn","dhx_delete_btn"];    
gantt.config.buttons_right = ["go_task_btn"];
gantt.locale.labels["go_task_btn"] = 'VER';
gantt.attachEvent("onLightboxButton", function(button_id, node, e){
      if(button_id == "go_task_btn"){
          var idTask = gantt.getState().lightbox;


         //HERE I WAN TO REDIRECT OR RENDER ANOTHER 
         // REACT COMPONENTE     



      }
  });

return (
  <div>
    <Toolbar
        zoom={this.state.currentZoom}
        onZoomChange={this.handleZoomChange}
    />
    <div className="gantt-container">
      <Gantt
        tasks={data}
        zoom={this.state.currentZoom}
        onTaskUpdated={this.logTaskUpdate}
        onLinkUpdated={this.logLinkUpdate}
      />
    </div>
     {/*<MessageArea messages={this.state.messages}/> */}
  </div>
);  }}export default App;
Reactib
  • 85
  • 3
  • 14
  • 2
    If I'm understanding you correctly, you want to programmatically navigate using react-router? Maybe this helps: https://stackoverflow.com/a/42121109/2637217 – Tobi Kremer Nov 13 '17 at 15:13
  • This desn't solve my problem. I can't and i don't wan to render a button component. I need use a line of code without a button. – Reactib Nov 13 '17 at 16:23
  • 1
    Check this answer https://stackoverflow.com/questions/44127739/programatically-navigate-using-react-router/44128108#44128108. Also you should probably add all the configurations that you did in render function in the componentDidMount function – Shubham Khatri Nov 13 '17 at 16:38
  • 1
    Make sure the router `history` is available as a `prop` and then `prop.history.push('/newlocation')` in your js. – Michel Floyd Nov 13 '17 at 17:27
  • 1
    @Cognitiva You don‘t need the button, just use `withRouter` and call `history.push()`. – Tobi Kremer Nov 13 '17 at 18:49

1 Answers1

0

You can do this by making a function outside render, put all your code their and call this function in the return.

Anuj Sharma
  • 49
  • 4