CODEWITHSUNDEEP
javascriptreactjs
Teris
Teris

Reputation: 33

Why does this callback function not add bind.(this)?

As I know, we need to use .bind each time when you pass your custom function to an event handler like onChange or onSubmit

In the following Example ,we pass an event handler (talk function) as a prop. When a user click a button,talk function will be called.

var React = require('react');
var ReactDOM = require('react-dom');
var Button = require('./Button');

var Talker = React.createClass({
  talk: function () {
    for (var speech = '', i = 0; i < 10000; i++) {
      speech += 'blah ';
    }
    alert(speech);
  },

  render: function () {
    return <Button talk={this.talk}/>;
  }
});

ReactDOM.render(
  <Talker />,
  document.getElementById('app')
);

Button.js

var React = require('react');

var Button = React.createClass({
  render: function () {
    return (
      <button onClick={this.props.talk}>
        Click me!
      </button>
    );
  }
});

module.exports = Button;

This example uses Button talk={this.talk} instead of Button {this.talk.bind.(this)}
,but why?

Upvotes: 0

Views: 122

Answers (4)

Suraj Rao
Suraj Rao

Reputation: 29614

.bind is used to ensure the function is called with the context of the class rather than the context of the caller.

It is required particularly when you access class properties within the function. For example if your speech variable was a class variable rather than a local one.

talk: function () {
    for (this.speech = '', i = 0; i < 10000; i++) {
      this.speech += 'blah ';
    }
    alert(this.speech);
  },

In this case you would need bind.

Your talk function is not doing this. It has its own local variables and so can be called using any this context.

talk={this.talk} will work here.

Also the syntax for bind function incorrect in the question. It needs to be this.talk.bind(this) not this.talk.bind.(this)

Upvotes: 1

user5490729
user5490729

Reputation:

This behavior is expected when using createClass where React binds every method (custom and that of React component API) to their component resulting 'this' to be available. same cannot be said about when using ES6 .... extends React.Component where react only binds 'this' to react component API methods.

Also, you don't exactly need to do this.talk.bind(this) each time were you using ES6 in your render method, instead

you could

constructor () {
    super()
    this.talk = this.talk.bind(this)
}

and use this.talk() anywhere in it.

for in-depth explanation, https://www.fullstackreact.com/articles/react-create-class-vs-es6-class-components/

Upvotes: 1

Mμ.
Mμ.

Reputation: 8542

In this case, you want to use bind if the component Talker is used in another component. If it is the case, this in the Talker component would refer to the other component instead. In your current case, it is passed down to the button. Therefore, the use of bind is required to ensure that it is calling from Talker instead of the Button component.

Upvotes: 0

digitake
digitake

Reputation: 856

Because, basically, .bind will "bind" a particular object to "this". But since the function doesn't make a use of "this" so it won't be matter if you bind it or not.

if in the function talk you have reference to a "Talker" class's instance. that's the moment you will start getting some issues.

Upvotes: 0

Related Questions