SPFx JQuery Dialog 按钮单击未找到公共功能答案

【问题标题】：SPFx JQuery Dialog button click does not find public functionSPFx JQuery Dialog 按钮单击未找到公共功能
【发布时间】：2020-05-31 09:01:12
【问题描述】：

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

}

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

【问题讨论】：

addAlert 在哪里/如何定义？看起来它不在“this”所指的同一个对象上。
@Charlie 它是在继承自BaseClientSideWebPart 的同一类中定义的。 this.addAlert("yes"); 在不使用对话框按钮单击时有效。
我怀疑“this”指的是 dialogOptions 实例而不是 BaseClientSideWebPart

标签： jquery sharepoint-online web-parts spfx

【解决方案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");
        }
      }
    };

【讨论】：

这不起作用，但帮助我找到了正确的答案。

【解决方案2】：

这在sharepoint spfx forum得到了答复

public onDialogButtonClick(status: string, e): void {
    this.addAlert(status);
    jQuery('.dialog', this.domElement).dialog("close");
}
public render(): void {
    this.domElement.innerHTML = AlertTemplate.templateHtml;
    const dialogOptions: JQueryUI.DialogOptions = {
      width: "50%",
      height: "auto",
      buttons: {
        "Subscribe": this.onDialogButtonClick.bind(this, "Subscribe"),
        "No Thanks": this.onDialogButtonClick.bind(this, "No Thanks"),
        "Ask me later": this.onDialogButtonClick.bind(this, "Ask me later")
      }
    };

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

【讨论】：