React 0.13 and Binding

[jacobp100]

I noticed that the new version of react will require manual binding. This problem will be lessened with ES7, but will still be there. I want to recommend an extension to the JSX language to bind functions to the scope: => over = (akin to arrow functions).

<button onClick=>{ this.onClick }>Submit</button>

[narqo]

Don't you think that #3040 might solve the problem?

[jacobp100]

Nope!

[syranide]

Closing this because it's really about JSX and not React (and you already created an issue over there).

[jacobp100]

Excerpt from facebook/jsx#27 (comment) as an alternative to using JSX syntax to bind.

class ComponentBase {
  constructor() {
    var excludeFuncs = ['render'];
    Object.getOwnPropertyNames(Object.getPrototypeOf(this)).forEach(function(func) {
      if (!excludeFuncs.includes(func) && typeof this[func] === 'function') {
        this[func] = this[func].bind(this);
      }
    }, this);
  }
  setState(state) {
    console.log(state);
  }
}

class Component extends ComponentBase {
  onClick() {
    this.setState({ items: ['test'] });
  }
}

var x = new Component;
var y = x.onClick;
y();

@syranide Would it be possible to reopen this, and keep this as discussion for implementing this in the React core, and use the other thread as doing it via JSX, just so we can explore all options.

Edit: We can use this.constructor.prototype over Object.getPrototypeOf for better compatibility.

[gaearon]

keep this as discussion for implementing this in the React core

I may be misinformed but I think the whole point of making ES6 classes available is for React to stop trying to provide a type system of its own. Thus autobinding for non-createClass-based classes shouldn't in my opinion belong in the core.

[jacobp100]

I think the point was more to not to have another class system, and just use the standard. Whilst my favourite suggestion is still doing this via JSX, overriding prototypal properties like this is not uncommon. See Array, where an Array instance has it's own length property, which overrides the prototype's length property.

Edit: forgot there's actually another thread in #3040. Let's keep this closed and continue the discussion there.