I am new to TypeScript and Sharepoint SPFx development. I have a jquery UI dialog box and a public function in the same class that makes some MSGRAPH calls after the button has been clicked. The button click returns with error this.addAlert is not a function. I think the problem is that the dialog code executes outside the web part context and hence does not know about the function available in the webpart context. How can I use the button click to run within the webpart context?

Here is the Dialog code.

    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();
  }

function addAlert

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;
      });
  });