SPFx JQuery对话框按钮单击未找到公共功能

Question

我是TypeScript和Sharepoint SPFx开发的新手。我在同一个类中有一个jquery UI对话框和一个公共函数，在单击按钮后会进行一些MSGRAPH调用。单击按钮返回错误this.addAlert is not a function。我认为问题在于对话框代码在Web部件上下文之外执行，因此不了解WebPart上下文中可用的功能。如何使用按钮单击在webpart上下文中运行？

这里是对话框代码。

    export default class YlsSpAlertWebPart extends BaseClientSideWebPart<IYlsSpAlertWebPartProps> {

      public constructor() {
        super();
        SPComponentLoader.loadCss('//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css');
      }

public render(): void {

    this.domElement.innerHTML = AlertTemplate.templateHtml;
    const dialogOptions: JQueryUI.DialogOptions = {
      width: "50%",
      height: "auto",
      buttons: {
        "Subscribe": function (e) {
          this.addAlert("Yes");
          jQuery(this).dialog("close");
        },
        "No Thanks": function (e) {
          console.log("moo");
          this.addAlert("No");
          jQuery(this).dialog("close");
        },
        "Ask me later": function (e) {
          this.addAlert("Ask Me Later");
          jQuery(this).dialog("close");
        }
      }
    };

    jQuery('.dialog', this.domElement).dialog(dialogOptions);
    jQuery(".ui-dialog-titlebar").hide();
  }


     public addAlert(status: string): void {
        var url = "/sites/" + this.context.pageContext.site.id + "/lists";
        var listId = "";
        var email = this.getCurrentUserEmail();
        var recordExists = false;
        let item: SubscriptionListItem;
        this.context.msGraphClientFactory
          .getClient()
          .then((client: MSGraphClient): void => {
            client
              .api(url)
              .top(1)
              .filter("equals=(displayName, 'Subscriptions'")
              .version("v1.0")
              .get((err, res) => {
                if (err) {
                  console.error(err);
                  return;
                }
                console.log(res);
                listId = res.id;
              });
          });

}

...跳过模板生成的其余样板

Answer 1

    var event=this.addAlert;
    const dialogOptions: JQueryUI.DialogOptions = {
      width: "50%",
      height: "auto",
      buttons: {
        "Subscribe": function (e) {
          event("Yes");
          //this.addAlert("Yes");
          jQuery(this).dialog("close");
        },
        "No Thanks": function (e) {
          console.log("moo");
          event("no");
          jQuery(this).dialog("close");
        },
        "Ask me later": function (e) {
          //this.addAlert("Ask Me Later");
          jQuery(this).dialog("close");
        }
      }
    };