I use .bind(this) but it keeps been undefined on the imported function? Javascript React

Question

I have a really big class with a lot of handlers, and the document it's starting to be illegible, I want to define the handlers methods outside my class and grouped on a document by type (all the tools have different handlers, so I catch the event and depending on the selectedTool I redirect it to the correct handler), then import those methods/functions and call them from another method like they were normal methods.

The first log, returns this correctly, but for some reason, the log from inside handleSelectorMouseDown returns "undefined" even tho i use.bind(this)

Answer 1

Try this:

handleSelectorMouseDown.bind(this)(e)

This will first bind the imported function to the correct scope, and then execute the function.

Another option is to bind the function in the class constructor and use it later:

class MyComponent {
    constrctor() {
      this.handleSelectorMouseDown = handleSelectorMouseDown.bind(this);
    }
}

Now you just need to call this.handleSelectorMouseDown(e)

Answer 2

You're using bind wrong, you have to first bind then call , I would create a reference at the class level for your binded handlers:

constructor() {
  this.onSelectorMouseDown = handleSelectorMouseDown.bind(this);
}

then you can call them as you like:

this.onSelectorMouseDown(e);