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

Posted 2023-03-27

【中文标题】SPFx JQuery Dialog 按钮单击未找到公共功能

【英文标题】：SPFx JQuery Dialog button click does not find public function

【发布时间】：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

【参考方案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();