Why should i need the bind when using event in React

Question

could someone explain to me why i need to use binding this.handleClick = this.handleClick.bind(this); when using event?

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

And why the value of 'this' is defined?

class Person {
    constructor(name, yearOfBirth) {
        this.name = name;
        this.yearOfBirth = yearOfBirth;
    }

    calculateAge() {
        console.log(this);
    }
}

const john = new Person('John', 1993);
john.calculateAge();

But the value of 'this' is undefined when clicked?

function ActionLink() {
    function handleClick(e) {
      e.preventDefault();
      console.log('The link was clicked.');
      console.log(this);
    }

    return (
      <a href="#" onClick={handleClick}>
        Click me
      </a>
    );
}

ReactDOM.render(
    <ActionLink />,
    document.getElementById('root')
);

Change the handleClick() function to this.handleClick() and call using this.handleClick(). What do you expect "this" to be? — Madison Courto, Dec 18 '18 at 03:26
Possible duplicate of [React: "this" is undefined inside a component function](https://stackoverflow.com/questions/33973648/react-this-is-undefined-inside-a-component-function) — stealththeninja, Dec 18 '18 at 03:34
So in react component you could use `handleClick = () => {` to declare `this` methods to avoid using `bind`. — Marson Mao, Dec 18 '18 at 03:45

Dinesh Pandiyan · Accepted Answer · 2018-12-18T03:39:24.937

this is always executed in the context of where the function was invoked.

So when a React component renders, the elements and the event handlers will be attached to the DOM and will be executed in the DOM's context. So if you don't bind the method to the component, you cannot use this inside the method.

// this will be window and window.setState will be undefinedd
this.setState(state => ({
  isToggleOn: !state.isToggleOn
}));

When you bind the method to the Component, this will execute in the Component's context and you will be able to invoke .setState.

Interestingly, if your method doesn't use any this invocations, you won't have any problems even if you don't bind.

As quirimmo pointed out in the comments, in strict mode, this will be undefined by default and ES6 Classes are executed in strict mode by default even if not specified explicitely. That's why this will be undefined if not bound to the class.

In strict mode, this will be undefined. Even in non strict mode, classes are executed as in strict mode. That s why it prints undefined and not the window object inside a react class method — quirimmo, Dec 18 '18 at 03:34
Thanks, this is the exact answer i was looking for, they are in different execution context since the Component is rendered in the DOM. — boosted_duck, Dec 18 '18 at 03:48

score 0 · Answer 2 · answered Dec 18 '18 at 03:25

0

This is undefined in the snippets you've posted for just that reason, they are undefined.

In the first, you ask why you need to for the function to work- its because you're trying to call the components 'this' to call set state. So to do that you just bind this from the components constructor so that when you call that function 'this' is defined and set to the components 'this'.

answered Dec 18 '18 at 03:25

J Livengood

2,729
1
12
26

1

I think your answer is fundamentally correctly but you might what to refactor your articulation. – Madison Courto Dec 18 '18 at 03:28

Why should i need the bind when using event in React

2 Answers2