0

I was just wondering why render() has 'this' set to a 'correct' or intuitive value by default, but then any other methods I define on a component must have 'this' explicitly set?

For example:

class App extends React.Component {

    constructor (props) {
      super(props);
    }

    onFormSubmit (e) {
      e.preventDefault();
      console.log(this);
    }

    render () {

      console.log(this);

      return (
        <div>
          <form onSubmit={this.onFormSubmit}>
            <input type="search"/>
            <button>Submit</button>
          </form>
        </div>
      );
    }

  }

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

The console output of the above is 

App {props: Object, context: Object...}
null

Why is that? Is there any way to make it so that, by default, this will refer to the App in both cases? Or do I just need to keep writing this.onFormSubmit = this.onFormSubmit.bind(this); in the constructor?

Maybe it makes no sense to want this behaviour by default (I am very new to programming!) but if that is the case please do explain why :)

All the best

[edit] Also... why is it that this returns null when referenced inside the onFormSubmit function?

NoobOfNoobs
  • 75
  • 1
  • 5
  • because other functions are used for transitioning data.. and that transition is asynchronous – John Ruddell Apr 21 '17 at 07:36
  • 1
    The value of `this` depends on how a function is called. Not how it is defined. See: http://stackoverflow.com/questions/13441307/how-does-the-this-keyword-in-javascript-act-within-an-object-literal/13441628?s=1|4.2098#13441628 – slebetman Apr 21 '17 at 07:47

1 Answers1

0

Just in case, have you tried <form onSubmit={this.onFormSubmit.bind(this)}>? It should work without binding inside the constructor

For the EDIT:

Your this return null because you're just calling the method .onFormSubmit() defined in the Component App (returned by your first console.log line) without any context.

I invite you to check this ressources:

  • To understand basics of .bind/.call/.apply methods

http://javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals/

  • A good tutorial for React, in this video he explains why you should always .bind() the context of this to prevent these issues

https://www.youtube.com/watch?v=_D1JGNidMr4&index=5&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b

Manu
  • 352
  • 1
  • 4
  • 14
  • 1
    Manu, thank you for these links. That article on the bind(), call() and apply() methods was particularly helpful and there was also an article on that website about `this` which helped. What I think I learned is that `this` refers to the object which called the function in which `this` is referenced. – NoobOfNoobs Apr 21 '17 at 12:10
  • yes exactly, because when you're calling a method defined in an objectA, the only way to process it with a different context (from an objectB) is to bind or call the `this` context of objectB! Like `var a = { name: "Manu", showName: () => {return this.name}} ` //// `var b = {name: "user3624937"}` //// `a.showName.bind(b)` will return "user3624937" – Manu Apr 21 '17 at 12:18
  • Pleasure is mine! :) – Manu Apr 21 '17 at 14:58