Event handler callbacks are usually invoked as functions, not as methods. This means that the this expressions of such callbacks evaluate to undefined or the global object. Using an ES6 class method as a callback therefore means that the this expressions of the method do not refer to the class instance.

Ensure that the receiver object of event handler methods that use this expressions is not undefined. For instance, you can use bind or explicitly invoke the method as a method call.

The following example, for the React framework, registers the handleClick method as an event handler for the click event:

This is problematic since this invokes handleClick as a function call instead of a method call, meaning that this is undefined inside handleClick.

Instead, bind the receiver of handleClick in the constructor:

  • React Quick Start: Handling Events.