ag-grid：需要在自定义工具面板中捕获点击事件

Question

我有ag-grid的企业版。在其中，我定义了一个自定义工具面板，用于在所选行上显示和添加注释。我还没有将代码连接到数据库，但是我存根了一些数据，并且一切似乎都工作正常。

我的问题是我无法捕获应该提交新评论的按钮上的click事件。我已经在注释组件和全局函数中进行了尝试。我不确定如何捕获事件。

function g_CommentsComponent() {}

g_CommentsComponent.prototype.init = function (params) {
    console.log("Comments Component: ", params);
    this.eGui = document.createElement("div");
    this.eGui.innerHTML = "Comments here.";

    params.api.addEventListener("rowClicked", this.fetchComments.bind(this));
};

g_CommentsComponent.prototype.getGui = function () {
    return this.eGui;
};

g_CommentsComponent.prototype.fetchComments = function (args) {
    console.log("fetchComments: ", args);
    var html = "<div style='padding: 5px;'><p>Fetching comments...</p></div>";
    this.eGui.innerHTML = html;

    setTimeout(this.renderComments.bind(this), 5000, [args]);
};

g_CommentsComponent.prototype.renderComments = function (args) {
    console.log("renderComments", args);
    var comments = [
        { commenter: "Andrew Cooper", date: "05/12/2018", comment: "Some quick example text to build on the card title and make up the bulk of the card's content." },
        { commenter: "Andrew Cooper", date: "05/12/2018", comment: "Some quick example text to build on the card title and make up the bulk of the card's content." },
        { commenter: "Andrew Cooper", date: "05/12/2018", comment: "Some quick example text to build on the card title and make up the bulk of the card's content." }
    ];
    var html = "<div style='margin: 5px;'><p style='margin-bottom: 0px;'><strong>Add Comment</strong></p></div>";
    html += "<div style='padding: 5px 5px 0px 5px;'><textarea rows='8' cols='22'></textarea></div>";
    html += "<div style='width: 100%' class='container-fluid clear-fix'><button class='btn btn-sm btn-primary form-control' onclick='handleCommentSubmitClick'>Submit</button></div>";

    comments.forEach((comment) => {
        html += "<div class='card border-primary' style='margin: 5px'>";
        html += "   <div class='card-header' style='padding: 3px 5px 3px 5px'>" + comment.commenter + "<br/>" + comment.date + "</div>";
        html += "   <div class='card-body' style='padding: 3px 5px 3px 5px'>" + comment.comment + "</div>";
        html += "</div>";
    });

    this.eGui.innerHTML = html;
};

g_CommentsComponent.prototype.handleCommentSubmitClick = function () {
    console.log("Handling submit event in object!");
};

function handleCommentSubmitClick () {
    console.log("Handling submit event!");
};

我认为该事件必须在某个地方触发，但是我不确定在什么范围内。