ES6 Class - Call method from within event handler

Question

I am trying to write an ES6 class for an interactive calendar on my current project.

The Class looks similar to the below:

class Calendar {

constructor (s) {

    this.eventButtons = s.eventButtons;
    this.eventButtons.forEach(button => button.addEventListener('click', this.method1);
    this.eventBoxes = s.eventBoxes;


method1 (e) {
    e.preventDefault();
    this.method2(e.target.href);
}

method2 (url) {
    console.log(url);
}

}


export default Calendar;

I know that the context of the 'this' keyword has changed from the constructor to the button which has been clicked within the method1 function. However I don't know how to keep the context of the button and the constructor within the same function. I tried changing the button event listener code to the following:

this.eventButtons.forEach(button => button.addEventListener('click', this.method1).bind(this);

But this just switches the context of the 'this' keyword to the constructor rather than the button. I need to use both in my function.

Any ideas? I'm hoping this is quite a common issue?

Possible duplicate of [Cannot call a method within a class it defined it in ES6 in Node.js](https://stackoverflow.com/questions/39621821/cannot-call-a-method-within-a-class-it-defined-it-in-es6-in-node-js) — noahnu, Jul 07 '17 at 12:21

score 7 · Answer 1 · answered Jul 07 '17 at 12:10

7

You could create a closure that would send the event and the button. The closure would keep the this context and send the button as well

button => button.addEventListener('click', event => this.method1(event, button))

answered Jul 07 '17 at 12:10

Guillaume Rochat

400
2
13

score 5 · Answer 2 · answered Jul 07 '17 at 12:08

5

Since you are using ES6, have you tried using an arrow function?

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

method1 = (e) => {
    e.preventDefault();
    this.method2(e.target.href);
}

answered Jul 07 '17 at 12:08

Sotiris Kiritsis

3,178
3
23
31

That's not ES6 though. It's [class-fields](https://github.com/tc39/proposal-class-fields) stage 2 proposal – CodingIntrigue Jul 07 '17 at 12:21

noahnu · Answer 3 · 2017-07-07T12:26:46.937

3

You have a few options:

You can bind the methods themselves:

this.method1 = this.method1.bind(this);
this.method2 = this.method2.bind(this);

There's the bind operator if you're using Babel (or some other transpiler). It hasn't been accepted into the standard yet, so I'd be weary of using it. Using the bind operator, you can do the equivalent:

this.method1 = ::this.method1
this.method2 = ::this.method2

The other option is to do what you've done already, just corrected.

You have to bind the method, not the result of the forEach.

this.eventButtons.forEach(button =>
    button.addEventListener('click', this.method1.bind(this)));

or with bind op:

this.eventButtons.forEach(button =>
    button.addEventListener('click', ::this.method1));

Finally, you also have the option of creating a wrapper function using arrow notation for lexical scope:

this.eventButtons.forEach(button =>
    button.addEventListener('click', (...params) => this.method1(...params)));

edited Jul 07 '17 at 12:26

answered Jul 07 '17 at 12:13

noahnu

3,479
2
18
40

I just tried your suggestion: this.eventButtons.forEach(button => button.addEventListener('click', this.method1.bind(this))); That makes the context of the 'this' keyword as the constructor. Which is great. But how do I then reference the button? – James Howell Jul 07 '17 at 12:21
1

@JamesHowell `e.currentTarget` or `e.target` - same as what you already have – CodingIntrigue Jul 07 '17 at 12:22
1

@noahnu Bind syntax `::` is still Stage 0 - not ES7 – CodingIntrigue Jul 07 '17 at 12:24
@CodingIntrigue thanks for the correction, I've edited my post. – noahnu Jul 07 '17 at 12:28
e.currentTarget did the trick. Thanks so much. Saved me hours scratching my head! – James Howell Jul 07 '17 at 12:39

score 3 · Answer 4 · answered Jul 07 '17 at 12:44

And if you use ES6, you can also use for of instead of forEach. This prevents creating yet another callback with its own scope. In this code, the keyword 'this' still refers to the original class.

this.eventButtons = s.eventButtons;
for(b of this.eventButtons){
   b.addEventListener('click', () => this.method1);
}

score 2 · Answer 5 · answered Jul 07 '17 at 12:10

2

Try using a lambda expression to set the delegate of your event as well. Something like below:

button.addEventListener('click', (e) => { e.preventDefault(); this.method2(); });

answered Jul 07 '17 at 12:10

gpanagopoulos

2,842
2
24
19

amiramw · Answer 6 · 2017-07-07T12:43:40.747

2

You can use bind to create a partial function:

this.eventButtons.forEach(button => button.addEventListener('click', this.method1.bind(this, button));

It works assuming you change method1 to be:

method1 (button, e) {
  e.preventDefault();
  this.method2(e.target.href);
}

edited Jul 07 '17 at 12:43

answered Jul 07 '17 at 12:13

amiramw

506
2
10

you have missing closing parenthesis. What did you mean to bind to? – noahnu Jul 07 '17 at 12:22

ES6 Class - Call method from within event handler

6 Answers6