サードパーティのコントロールからのイベントの反応、更新状態

Question

サードパーティのコントロールgantt chartをクリックしたときの状態を更新する反応コンポーネントInfoPanelがあります。私は、コンポーネントがお互いに通信できるようにフラックスでこれを行っただけです。サードパーティコントロールイベントonTaskClickが発生したときに、InfoPanelコンポーネントの状態を変更する方法がわかりません。

ここでは、サードパーティのコントロールに対して発生するイベントがあります。ここ

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

は私InfoPanel成分

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> 

     ); 
    } 

}）です。

このようなものをコンポーネントに追加する必要がありますか？ <InfoPanel OnTaskClick = infoPanelService.OnTaskClick />の代わりに、コンストラクタ内でイベントをすぐに付け加えて、その関数を小道具としてサービスから渡すのではなく、このようにしてコンポーネントは完全に愚かであり、簡単に投げて再利用することができます。

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

Answer 1

私の提案は、コンポーネントは、それがカスタム/サードパーティのイベントトリガーされるので、tehnはこのように進んでマウントされるまで待つことを次のようになります。

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