Why 'this' is different in React class than in Js event handler?

Question

when I use this code :

html :  <body>
   <button>Click me</button>
   <script type="module" src="1.js"></script>
 </body>
JS : const btn = document.querySelector('button')
class Events {
 constructor() {
   console.log(this)
   btn.addEventListener('click', this.handleClick)
 }
 handleClick() {
   console.log(this)
 }
}
const event = new Events()

"this" = button element

But when I use this code in react:

class Event extends Component {
  constructor(props) {
    super(props)

    this.state = {}
  }
  handleClick() {
    console.log(this)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    )
  }
}

"this" = undefined why 'this' in the javascript event handler is different than react event handler?

try adding this in constructor `this.handleClick = this.handleClick.bind(this)` — Someone Special, Apr 10 '21 at 09:51
Thanks but actually i know all solutions. i need to know the difference for why 'this' works differently? — JsStudent, Apr 10 '21 at 09:53
Try removing `btn.addEventListener('click', this.handleClick)` from constructor in your first file, will the handleClick still have `this`? This should clear it for you, if not I can go in depth — Antonio Erdeljac, Apr 10 '21 at 09:55
**All:** Note that the question asked above is "why is it different?" not "what do I do about it?" — T.J. Crowder, Apr 10 '21 at 09:57

T.J. Crowder · Accepted Answer · 2021-04-10T10:27:04.700

Because React's synthetic event system doesn't call your function with this set to the DOM element, and the DOM does. It's just the way that React's event handling is written. Instead of yourHandler.call(theDOMElement, eventObject) it just does yourHandler(eventObject). You can read more about it here. If you want to access the DOM element, use the currentTarget property of the event object:

handleClick(event) {
    const element = event.currentTarget;
    // ...
}

That's the same element that the DOM uses for this (and is both a DOM property and a React property). Note that currentTarget and target are not the same thing; target may be an element within the element you hooked the event on, but currentTarget will always be the element you hooked the event on.

The next question might be what you do about it. That's covered here and here.

Why 'this' is different in React class than in Js event handler?

1 Answers1