value of this as relates to React

Question

I know that this topic has been asked a thousand times, but I am yet to find a straight answer as to what the value of 'this' is in a situation such as this (from React Quickly):

import React from 'react'
import ReactDOM from 'react-dom'

class Content extends React.Component {
    constructor(props) {
        super(props);
        console.log(this," --> this (constructor)");
        //this.submit = this.submit.bind(this);
        this.prompt = 'Please enter your email to win $1,000,000.';
    }
    submit(event) {
        console.log(this," --> this (submit)");
        let emailAddress = this.refs.emailAddress;
        let comments = this.refs.comments;
    }
    render() {
        console.log(this," --> this");
        return (
            <div className="well">
                <p>{this.prompt}</p>
                <div className="form-group">Email: <input ref="emailAddress" className="form-control" type="text" placeholder="hi@azat.co"/></div>
                <div className="form-group">Comments: <textarea ref="comments" className="form-control"  placeholder="I like your website!"/></div>
                <div className="form-group"><a className="btn btn-primary" value="Submit" onClick={this.submit}>Submit</a></div>
            </div>
        )
}



ReactDOM.render(<Content />,document.getElementById('content'));

I feel that I understand why you need to use bind in the constructor or an arrow function. I get that, without the commented out this.submit = this.submit.bind(this), the 'this' in the submit method is undefined. However, ever since JS replaced the actual value of this in strict mode to simply return 'undefined', I am unsure what the 'this'is. Specifically -- does the 'this' in the render refer to the global/window 'this' or does it refer to the this of the div DOM object...or neither? I know this probably seems nit-picky, but I would really like to know -- in addition to knowing that 'this' does NOT refer to the Content class -- what precisely the 'this' refers to.

Thanks

You might check this answer https://stackoverflow.com/questions/47679673/how-does-event-handlers-with-arrow-functions-achieve-context-binding/47680408#47680408 — Shubham Khatri, Jan 30 '18 at 07:14

score 0 · Answer 1 · answered Jan 30 '18 at 07:35

0

for a vanilla javascript function like

submit(event) {
   ...
}

value of this will depend on how it is called.

To have component reference in this you can change the code in following multiple ways:

Make submit function as an arrow function

submit = (event) => {
   ...
}

Or change the way you call it

<div className="form-group">
   <a className="btn btn-primary" value="Submit" onClick={(e) => this.submit(e)}>Submit
   </a>
</div>

Or bind this explicitly to the function inside the constructor

constructor(props) {
   super(props);
   ...
   this.submit = this.submit.bind(this);
}

answered Jan 30 '18 at 07:35

Shrey Kejriwal

726
4
13

I appreciate the answer, but you have basically just recited the 'this' rules...I know all of these; I guess my problem is that, in *spite* of knowing the rules, I still am unsure as to what the 'this' is referring to in my specific example. I think the 'this' is referring to the DOM object div object, but I would like confirmation that this is indeed the case; if not, then what it it's context. Thanks! – user2403232 Feb 01 '18 at 03:09

value of this as relates to React

1 Answers1