模板文字中的事件回调

Question

大家好，我是 javascript 的新手，我正在尝试使用模板文字对用户的点击事件执行回调函数。然而，回调是在模板的评估中执行的。

行方法被另一个正在传递项目和回调函数的 class 调用。

class Clazz {
  row(item, deleteCallback){
      return `<a href="#" onClick="${deleteCallback(item.requestId)}"></a>`
  }
}

谁能帮帮我？

Answer 1

我认为更好的方法是 return 来自 row 的元素而不是 HTML 字符串。像这样：

class Clazz {
  row(item, deleteCallback){
    const a  = document.createElement('a');
    a.href = '#';
    a.onclick = () => deleteCallback(item.requestId);
    return a;
  }
}

然后可以使用 append、after 或类似的东西将其添加到 DOM。

模板文字中的事件回调

Event Callback Inside Template Literal

javascript

template-literals