1

我想从我尝试过的 eventRender 函数回调中调用 handleContextEdit 方法 this.handleContextEdit(event); 但它不工作。请帮帮我。

export default class FullCalendarJs extends LightningElement {
initialiseFullCalendarJs() {
  
  const ele = this.template.querySelector('div.fullcalendarjs');
 
  $(ele).fullCalendar({
    // this.calendar = new FullCalendar.Calendar(ele,{
    header: {
        left: 'prev,next, today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    //themeSystem:'bootstrap3',
    plugins: [ 'momentTimezone' ],
    defaultDate: moment(),
    
    navLinks: true, // can click day/week names to navigate views
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: this.programEventList,

   
    eventRender:function(event, element){
      var originalClass = element[0].className;
      element[0].className = originalClass + ' hasmenu';
      $(ele).contextMenu({
        selector: '.hasmenu', 
        callback: function(key, options,e) {
          
          this.handleContextEdit(event); //this is undefined here
        },
        items: {
            "view": {name: "View", icon: "view"},
            "edit": {name: "Edit", icon: "edit"}, 
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: function(){
                return 'context-menu-icon context-menu-icon-quit';
            }}
        }
    });
    }
  });
  $(ele).fullCalendar('render');
}

handleContextEdit(event){
  console.log(event);
}
}

我想从我尝试过的 eventRender 函数回调中调用 handleContextEdit 方法 this.handleContextEdit(event); 但它不工作。请帮帮我。谢谢！！

4

1 回答 1

0

试试下面的代码

this.handleContextEdit(event);可能不包含组件的引用，

因此，您在开始时创建变量以保存this上下文

在下面的示例中，我创建了一个变量self

let self = this;

并且函数调用看起来self.handleContextEdit(event);而不是this.handleContextEdit(event);

export default class FullCalendarJs extends LightningElement {
initialiseFullCalendarJs() {

const ele = this.template.querySelector('div.fullcalendarjs');

let self = this;
$(ele).fullCalendar({
// this.calendar = new FullCalendar.Calendar(ele,{
header: {
    left: 'prev,next, today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},
//themeSystem:'bootstrap3',
plugins: [ 'momentTimezone' ],
defaultDate: moment(),

navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: this.programEventList,


eventRender:function(event, element){
  var originalClass = element[0].className;
  element[0].className = originalClass + ' hasmenu';
  $(ele).contextMenu({
    selector: '.hasmenu', 
    callback: function(key, options,e) {

      self.handleContextEdit(event); 
    },
    items: {
        "view": {name: "View", icon: "view"},
        "edit": {name: "Edit", icon: "edit"}, 
        "delete": {name: "Delete", icon: "delete"},
        "sep1": "---------",
        "quit": {name: "Quit", icon: function(){
            return 'context-menu-icon context-menu-icon-quit';
            }}
         }
        });
      }
   });
   $(ele).fullCalendar('render');
   }

  handleContextEdit(event){
    console.log(event);
  }
}
于 2020-03-21T17:46:28.400 回答