Using "This" In Event Listeners

JavaScript
1

Tell us what’s happening:
I don’t understand why we need to add “this” before the callback function in the event listener. I found an explanation here:

" When inside a class method and referring to other methods/properties in the class, you need to use the this keyword."

Can someone clarify what this means? Which methods/properties are being referred to?
Or you can just explain it a different way if it’s easier.

  **Your code so far**


class MyComponent extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    message: ''
  };
  this.handleEnter = this.handleEnter.bind(this);
  this.handleKeyPress = this.handleKeyPress.bind(this);
}
// Change code below this line
componentDidMount(handleKeyPress) {
  document.addEventListener('keydown',this.handleKeyPress)
}
componentWillUnmount(handleKeyPress) {
  document.removeEventListener('keydown',this.handleKeyPress)
}
// Change code above this line
handleEnter() {
  this.setState((state) => ({
    message: state.message + 'You pressed the enter key! '
  }));
}
handleKeyPress(event) {
  if (event.keyCode === 13) {
    this.handleEnter();
  }
}
render() {
  return (
    <div>
      <h1>{this.state.message}</h1>
    </div>
  );
}
};

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

Challenge: Add Event Listeners

Link to the challenge:

2

to answer that for yourself, you need to know, how ‘this’ keyword is used in a ‘class’ structure in js environment!!

there are many resources you’ll find to help about this topic, for instance try this resource from w3School or from mdn see if that clear things up or not!!

1 Like
3

A solid understanding of JavaScript is recommended before moving on to JavaScript’s frameworks and libraries like React.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.