javascript - 对来自第三方控件的事件使用react，更新状态

Question

我有一个 React 组件 InfoPanel我想在单击第三方控件时更新状态 gantt chart .我只使用 flux 来做到这一点，以允许组件相互通信。我不确定如何更改 InfoPanel 的状态第三方控件事件时的组件onTaskClick火灾。

这是为第三方控件触发的事件。

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/> 而不是立即在构造函数中附加事件并将该函数作为 Prop 从服务中传递？这样，该组件就完全是哑巴了，我可以轻松地扔掉它并重新使用它。

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

Answer 1

我的建议是等到组件安装完毕再继续，因为它是自定义/第 3 方触发的事件:

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