我有一个 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();
},
最佳答案
我的建议是等到组件安装完毕再继续,因为它是自定义/第 3 方触发的事件:
componentDidMount() {
//component is mounted/inserted to DOM,
// Attach your 3td party/custom event listener
this.getDOMNode().addEventListener("onTaskClick", ()=>{/*handle it here*/});
}
关于javascript - 对来自第三方控件的事件使用react,更新状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42122330/