Bind ES6 class methods in constructor

[klimashkin]

Seems like binding class methods in ES6 class constructor doesn't work with react-transform-hmr (which uses react-proxy)

class Test extends Component({
  constructor(props) {
    super(props);
    this.state = {open: false};
    this.handleMouseDown = this.handleMouseDown.bind(this);
    window.testInstance = this;
  }
  handleMouseDown() {
    console.log(window.testInstance === this); // false
    this.setState({open: true}); // Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the  component.
  }
  render {
    return <div onMouseDown={this.handleMouseDown}>Test</div>;
  }
})

Binding in componentWillMount works:

class Test extends Component({
  constructor(props) {
    super(props);
    this.state = {open: false};
  }
  componentWillMount() {
    window.testInstance = this;
    this.handleMouseDown = this.handleMouseDown.bind(this);
  }
  handleMouseDown() {
    console.log(window.testInstance === this); // false
    this.setState({open: true}); // Ok
  }
  render {
    return <div onMouseDown={this.handleMouseDown}>Test</div>;
  }
})

[gajus]

I've wasted +4 hours tracing this bug. :-(

[klimashkin]

It's still impossible to use HMR with es6 components without moving part of constructor to componentWillMount which is unwanted

[noinkling]

This is even more important now that the class properties proposal has made it to stage 3, as this is how they're transpiled.

As a reminder, in the React docs it says this:

We generally recommend binding in the constructor or using the property initializer syntax

so this is very much intended usage.