New rule: no-unbound-method-callbacks

[danvk]

This is a mistake:

class MyComponent extends React.Component<{}, {}> {
  render() {
    return <button onClick={this.handleClick}>Click me!</button>;
    //                      ~~~~~~~~~~~~~~~~  passing unbound method
  }

  handleClick(e: any) {
    alert('You clicked!');
  }
}

There are many possible solutions, a few of which include:

• onClick={this.handleClick.bind(this)}
• onClick={e => this.handleClick(e)}
• Adding this.handleClick = this.handleClick.bind(this); in the constructor

A lint rule would need to at least check for the last one to avoid false positives.

[adidahiya]

this could potentially be a more general rule: palantir/tslint#259

[nchen63]

this will be part of the next tslint release palantir/tslint#2089

[adidahiya]

closing as this is available in tslint core rules