Question

我要根据用户单击“删除”还是“取消”，从自定义弹出类返回true或false。

我已经创建了弹出类和一个用于显示弹出窗口的init方法。 init方法只是用于设置弹出窗口样式和添加按钮的模板字符串。我创建了一个getResult（）方法，并向“取消”和“删除”按钮添加了一些单击事件侦听器。在我的app.js文件中，我实例化了一个弹出类，并调用了getResult（）方法，并尝试将返回值存储在变量“ decision”中。

class Popup {
    constructor(title, message){
        this.title = title;
        this.message = message;
        this.container = document.querySelector('body');
    }

init(){
    const popup = `
        <div class="popup-wrapper">
            <div class="popup bg-white p-1">
                <div class="popup-close">X</div>
                <div class="popup-content ">
                    <h2 class="">${this.title}</h2>
                    <p class="p-1 my-2">${this.message}</p>
                    <div class="dialogue_buttons my-1">
                        <button class="btn popup-no" onClick="">Cancel</button>
                        <button class="btn btn-danger my-1 popup-yes" onClick="">Start Delete</button>
                    </div>
                </div>
            </div>
        </div>  
    `;
    this.container.innerHTML += popup;
}

getResult(){
    document.querySelector('.popup-no').addEventListener('click', () => {
        console.log('no');
        return false;  
    })     
    document.querySelector('.popup-yes').addEventListener('click', () => {
        console.log('yes');
        return true;  
    })     
}

}

export default Popup

下面是我的app.js文件，其中我未显示弹出窗口。

 experienceTable && experienceTable.addEventListener('click', async e => {
  const id = e.target.parentElement.parentElement.getAttribute('data-id');
  if (e.target.tagName === 'BUTTON') {
    console.log(id);
    const confirmDelete = new Popup(
      'Delete', 
      'This will permanently delete this experience record.',
      ()=>db.deleteExperience(id),
      id
    );
    confirmDelete.init();
    const decision = await confirmDelete.getResult();
    console.log(decision);
  }
})

在我的app.js文件中，我实例化了一个新的Popup并称为init方法。弹出窗口在我的浏览器中正确显示。当我单击“取消”时，它的控制台将按预期记录“否”。当我单击“删除”时，控制台将按预期记录日志“是”。但是，当我用控制台记录变量决定时，我什么也没得到。我希望根据用户单击哪个按钮来决定是对还是错。

Answer 1

我相信您的getResult方法当前实际上未返回任何内容，因为return语句当前仅在回调范围内，然后卡在该级别。

getResult(){
  let result = false;
  document.querySelector('.popup-no').addEventListener('click', () => {
    console.log('no');
  })     
  document.querySelector('.popup-yes').addEventListener('click', () => {
    console.log('yes');
    result = true;
  })
  return result;     
}

因此，您在这里创建一个变量，然后在回调中将值分配给该变量，然后返回该结果。

Answer 2

我可以看到您在getResult函数中附加了按钮单击事件列表器。这种方法的副作用是，当您调用getResults方法时，单击事件列表器将一次又一次地附加。

我对您的代码做了一些改进，并且还附加了回调参数，以防您在用户做出是/否响应后想做任何事情。

我在init方法中附加了事件侦听器。现在，您可以显式调用getResults方法，如果要在响应时自动执行，则可以传递回调。

class Popup {

  constructor(title, message, callback) {
    this.title = title;
    this.message = message;
    this.callback = callback;
    this.container = document.querySelector('body');
    this.result = '';
  }

  init() {
    const popup = `
        <div class="popup-wrapper">
            <div class="popup bg-white p-1">
                <div class="popup-close">X</div>
                <div class="popup-content ">
                    <h2 class="">${this.title}</h2>
                    <p class="p-1 my-2">${this.message}</p>
                    <div class="dialogue_buttons my-1">
                        <button class="btn popup-no" >Cancel</button>
                        <button class="btn btn-danger my-1 popup-yes" >Start Delete</button>
                    </div>
                </div>
            </div>
        </div>  
    `;
    this.container.innerHTML += popup;

    this.container.querySelector('.popup-no').addEventListener('click', () => this.cancelListner());
    this.container.querySelector('.popup-yes').addEventListener('click', () => this.startListner());

  }

  cancelListner(event) {
    this.result = 'no'
    if (this.callback !== undefined) {
      this.callback(this.result);
    }
  }

  startListner() {
    this.result  = 'yes';
    if (this.callback !== undefined) {
      this.callback(this.result);
    }
  }

  getResult() {
    return this.result;
  }

}

希望这会有所帮助！

如何从javascript类方法返回值？

2 个答案: