Cannot set property with ref callback

I am trying to set a ref attribute using a class method:

export default class Foo extends Component {
    handleClick (event) {
      console.log(this.foobar);
    }

    setRef (ref) { // Using this syntax works in the REPL: setRef = (ref) => {  
      console.log(ref); // <input>
      console.log(this); // undefined
      this.foobar = ref; // error
      return ref;
    }

    render() {
        return (
            <div>
                <input ref={this.setRef} />
                <button onClick={this.handleClick}>click me</button>
            </div>
        );
    }
}

As already commented in the code snippet, this is undefined in setRef() and thus, setting this.foobar fails with a Cannot set property ‘foobar’ of undefined error…

What am I missing here?

Note: I am using ECMAScript 6 via Babel. In the Preact REPL I can use the alternative syntax as commented (fat arrow) to make the code working. Could this be a Babel issue?

[developit]

Hi @p3k: the reason setRef errors here is because without the fat arrow syntax, the method is not bound to the class instance. When preact calls your setRef function, it does not invoke it with context, so the value of this is always undefined. Using the fat arrow syntax or a locally defined function provides the desired value for this.

If you’re getting an error when trying to transpile the fat arrow method syntax in Babel, make sure you have installed and enabled the babel-plugin-transform-class-properties plugin, or the stage-0 preset which includes it.

Other options for statically binding class methods would include using a @bind decorator (like decko’s) or binding manually in a constructor:

export default class Foo extends Component {
    constructor(props, context) {
        super(props, context);
        this.setRef = this.setRef.bind(this);
    }
    setRef (ref) {
      this.foobar = ref;
    }
}

However, it’s worth noting the resulting output simplicity when using the fat arrow technique: https://goo.gl/TQJ44T

I had previously been promoting the use of @bind and similar solutions, but I think the ES5 output of the fat arrow property methods is quite pleasant.

[developit]

@leonid-bauxy the implementation of ref is different from Events. It’s always invoked on the component itself (implementation). Your other PR is definitely interesting though, I think we need to drop the .call there as you recommended.