Always call event handlers with component as "this"

Quite new to preact, but one thing struck my immediately. Wouldn’t it be nicer if event handlers were called with the component in question as the thisArg automatically. Otherwise everybody needs to handle it everywhere with e.g. lambda bindings or explicit bind calls. E.g. something like

// Suggested code inside preact
const handler = listener.bind(compInstance);
el.addEventListener('someEvent', handler);

Maybe I’m missing something. Thanks for a nice product!

[developit]

Just a heads up, the value of this in event handlers is likely to change in an upcoming major version of Preact. Closing for now since it’ll likely change to the element the handler was bound to (matching how addEventListener works).

[developit]

I think we’re going to see some movement in the component definition space soon - perhaps away from ES Classes once again, to simple factories that handle autobinding for you.

Personally, when I can get away with it, I prefer to use a decorator to declaratively bind methods to my component instances:

import { bind } from 'decko';

class Foo extends Component {
  @bind
  handleClick (e) {
    console.log(this);  // our Foo instance!
  }
  render () {
    return <button onClick={this.handleClick}>Click Me</button>
  }
}