-1

i am sharpening me react skills and by doing this i stumbled across this sweet line of code.

export default class SearchBar extends Component {

  constructor(props) {
    super(props);
    this.state({term:''});

    this.onInputChange = this.onInputChange.bind(this);
  }

  onInputChange(event) {
    this.setState({ term: event.target.value});
  }
}

Here the jsx part

render() { 
  return(<input
    value={ this.state.term }
    onChange={ this.onInputChange }
  />)
}

Can you please help/tell or show me sources, where i can really understand what is going on in the line? 

this.onInputChange = this.onInputChange.bind(this);

it kind of confuse me. thanks for your affords. and kind regards

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
Paulquappe
  • 144
  • 2
  • 6
  • 15
  • 2
    Possible duplicate of [React.js and ES6: Any reason not to bind a function in the constructor](http://stackoverflow.com/questions/31294494/react-js-and-es6-any-reason-not-to-bind-a-function-in-the-constructor) – Mayank Shukla Mar 20 '17 at 11:20
  • check this also: http://stackoverflow.com/questions/38334062/why-do-you-need-to-bind-a-function-in-a-constructor – Mayank Shukla Mar 20 '17 at 11:22

1 Answers1

1

You can go through this blog to understand why binding is needed.

And for binding the methods, I would suggest you to install stage-1 Babel preset and use arrow functions. Arrow functions automatically binds this, so we don't need to use the bind() function.

For more clarity, you can read this blog.

With the arrow function you code will look like this:

export default class SearchBar extends Component {

  constructor(props) {
    super(props);
    this.state({term:''});
  }

  onInputChange = (event) => {
    this.setState({ term: event.target.value});
  }
}

render() { 
  return(
    <input
      value={this.state.term}
      onChange={this.onInputChange}
    />
  )
}

Now you don't need to add bind statement every time a new function is added.

Shishir Anshuman
  • 1,115
  • 7
  • 23
  • can you explain how this answer the OP's ques ?? he is asking the meaning of that line not the alternate of that :) i think binding method in constructor is more efficient . – Mayank Shukla Mar 20 '17 at 12:55
  • How is binding method more efficient? Both the binding method and the arrow functions will do the same thing. With bind function, we need to add an extra statement every time a new function is needed. We don't need any extra statement with arrow functions. So the code becomes a bit cleaner :) – Shishir Anshuman Mar 20 '17 at 13:11
  • 1
    check the link i pasted in comments :) one more thing how this is answering the original ques ? – Mayank Shukla Mar 20 '17 at 13:13
  • 1
    Yeah, I think I went off-course. I have added a link in the answer. Thanks for reminding me :). And for binding, I still don't think there is a huge difference between the two methods. Please have a look at this [comment](https://github.com/facebook/react/issues/7385#issuecomment-236684699). – Shishir Anshuman Mar 20 '17 at 13:29
  • thanks for replying, i read the blog article and got it now. ty a lot. – Paulquappe Mar 23 '17 at 12:10