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

Question

我有一个 React 组件 InfoPanel，当我点击第三方控件 gantt chart 时，我想更新它的状态。我只使用 flux 来做到这一点，以允许组件相互通信。当第三方控制事件 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

我的建议是等到组件安装完毕再继续，因为它是 custom/3rd 派对触发事件：

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

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

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

.net

javascript

reactjs

reactjs.net