Question

我有一个反应组件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 /＆gt;而不是立即将事件附加到构造函数内部并将该函数作为props传递给服务？这样组件就完全笨了，我可以轻松地抛出它并重复使用它。

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

Answer 1

我的建议是等到组件安装后，tehn继续这样做，因为它是自定义/第三方触发的事件：

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

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

1 个答案: