1

I am reading the Thinking in React documentation at https://facebook.github.io/react/docs/thinking-in-react.html

In the last part of the document https://facebook.github.io/react/docs/thinking-in-react.html#step-5-add-inverse-data-flow, I can't understand the use of bind(this) and how it is working. Specifically, I am trying to understand:

Why we need these two lines in the SearchBar component:

this.handleFilterTextInputChange = this.handleFilterTextInputChange.bind(this);
this.handleInStockInputChange = this.handleInStockInputChange.bind(this);

And the following two lines in the FilterableProductTable component:

this.handleFilterTextInput = this.handleFilterTextInput.bind(this);
this.handleInStockInput = this.handleInStockInput.bind(this);

What will happen if we don't to these binds?

I have read the documentation for the JavaScript bind function and some examples on inverse data flow that I found on Google but still can't get my head around it.

Would appreciate if someone could deconstruct the data flow and what this refers to in each instance.

smartexpert
  • 2,625
  • 3
  • 24
  • 41
  • Read this. https://medium.com/@rjun07a/binding-callbacks-in-react-components-9133c0b396c6#.4mthme884 – Nick Feb 23 '17 at 23:09
  • And more generally: [Use of the JavaScript 'bind' method](http://stackoverflow.com/q/2236747/218196) – Felix Kling Feb 23 '17 at 23:17

2 Answers2

0

The bind call returns a new function which will call the bound function with this (the context) set to the given value. If you follow the example further you see that these two functions are given to child components as callback methods/event handlers.

Without the bind the child components would have to make sure to call the callback with the correct context (their parent). This would couple these components unnecessarily and puts a high burden on the developer to not forget this.

If the parent component binds the callbacks to itself it ensures, that the child components (who are supposed to use the callback) do not have to know about this and can just call the callback.

squiddle
  • 1,259
  • 8
  • 17
0

Calling bind() on a function object allows that function object to be called from any context without its this being changed. So for example you could do this:

// Inside the SearchBar component
this.handleFilterTextInputChange = this.handleFilterTextInputChange.bind(this);
this.handleInStockInputChange = this.handleInStockInputChange.bind(this);

// Elsewhere
someOtherObj.doTheThing = this.handleFilterTextInputChange;

// And inside someOtherObj
someClassMethod : function () {
    this.doTheThing();
}

In that call to doTheThing(), if you hadn't called bind(this) above, then any reference to this inside of handleFilterTextInputChange would be pointing to someOtherObj. Having called bind, though, even though you've passed the function into a totally different context, this will still point to the SearchBar component.

In short, bind() allows you to ensure that whenever a function is called, no matter what the circumstance, this will be whatever you passed to bind().

AmericanUmlaut
  • 2,817
  • 2
  • 17
  • 27