1

我有一个反应组件InfoPanel，我想更新单击第三方控件时的状态gantt chart。我只使用通量来完成此操作，以允许组件相互通信。我不确定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/> 而不是立即在构造函数中附加事件并将该函数作为道具从服务中传递？这样组件就完全没有问题了，我可以轻松地扔掉它并重用它。

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

1 回答 1

2

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

componentDidMount() {
    //component is mounted/inserted to DOM, 
    // Attach your 3td party/custom event listener
    this.getDOMNode().addEventListener("onTaskClick", ()=>{/*handle it here*/});
  }
于 2017-02-08T20:41:05.363 回答