反应，更新来自第三方控件的事件状态

Question

我有一个反应组件InfoPanel，我想更新单击第三方控件gantt chart 时的状态。我只使用通量完成此操作，以允许组件相互通信。当第三方控制事件onTaskClickfires时，我不确定如何更改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

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

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