es6 call class methods within class but also within a on click function [duplicate] - ecmascript-6

Question

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 5 years ago.
I have this es6 class:
class CommentsController {
constructor() {
this.$addCommentForm = $('.add-comment')
this.$addCommentButton = $('.add-comment input[type=submit]')
}
init() {
this.addCommentFormListener();
}
addCommentFormListener() {
this.$addCommentButton.on('click', function(e) {
e.preventDefault();
let imageId = parseInt($(this).parents('ul').data('id'));
let inputText = $(this).parents('ul').find('.user-text').val();
let comment = new Comment(inputText, imageId);
debugger;
CommentsController.renderComment(comment, imageId)
});
}
renderComment(comment, imageId) {
let image = Image.all[imageId]
image.comments.push(comment)
$('#images').find(`ul[data-id=${imageId}] ul#comments-${imageId}`).append(`<li>${comment.text}</li>\n`);
}
}
The problem is that at the debugger, I want to call the renderComment function but I cannot because this does not refer to the controller anymore. What can I do?

Answer 1

Use an arrow function instead of a function:
An arrow function does not have its own this; the this value of the
enclosing execution context is used.
However, now you can get the clicked element from this, because this refers to the instance. Instead get the clicked element using Event.target:
addCommentFormListener() {
this.$addCommentButton.on('click', (e) => {
e.preventDefault();
const $el = $(e.target);
const imageId = parseInt($el.parents('ul').data('id'));
constinputText = $el.parents('ul').find('.user-text').val();
const comment = new Comment(inputText, imageId);
this.renderComment(comment, imageId)
});
}