Unable to access React instance (this) inside event handler [duplicate]

Answer 1

Morhaus is correct, but this can be solved without bind.

You can use an arrow function together with the class properties proposal:

class SomeClass extends React.Component {
  changeContent = (e) => {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return <input type="text" onChange={this.changeContent} />;
  }
}

Because the arrow function is declared in the scope of the constructor, and because arrow functions maintain this from their declaring scope, it all works. The downside here is that these wont be functions on the prototype, they will all be recreated with each component. However, this isn't much of a downside since bind results in the same thing.

Answer 2

Although the previous answers have provided the basic overview of solutions (i.e. binding, arrow functions, decorators that do this for you), I've yet to come across an answer which actually explains why this is necessary—which in my opinion is the root of confusion, and leads to unnecessary steps such as needless rebinding and blindly following what others do.

this is dynamic

To understand this specific situation, a brief introduction to how this works. The key thing here is that this is a runtime binding and depends on the current execution context. Hence why it's commonly referred to as "context"—giving information on the current execution context, and why you need to bind is because you loose "context". But let me illustrate the issue with a snippet:

const foobar = {
  bar: function () {
    return this.foo;
  },
  foo: 3,
};
console.log(foobar.bar()); // 3, all is good!

In this example, we get 3, as expected. But take this example:

const barFunc = foobar.bar;
console.log(barFunc()); // Uh oh, undefined!

It may be unexpected to find that it logs undefined—where did the 3 go? The answer lies in "context", or how you execute a function. Compare how we call the functions:

// Example 1
foobar.bar();
// Example 2
const barFunc = foobar.bar;
barFunc();

Notice the difference. In the first example, we are specifying exactly where the bar method¹ is located—on the foobar object:

foobar.bar();
^^^^^^

But in the second, we store the method into a new variable, and use that variable to call the method, without explicitly stating where the method actually exists, thus losing context:

barFunc(); // Which object is this function coming from?

And therein lies the problem, when you store a method in a variable, the original information about where that method is located (the context in which the method is being executed), is lost. Without this information, at runtime, there is no way for the JavaScript interpreter to bind the correct this—without specific context, this does not work as expected².

Relating to React

Here's an example of a React component (shortened for brevity) suffering from the this problem:

handleClick() {
  this.setState(({ clicks }) => ({ // setState is async, use callback to access previous state
    clicks: clicks + 1, // increase by 1
  }));
}

render() {
  return (
    <button onClick={this.handleClick}>{this.state.clicks}</button>
  );
}

But why, and how does the previous section relate to this? This is because they suffer from an abstraction of the same problem. If you take a look how React handles event handlers:

// Edited to fit answer, React performs other checks internally
// props is the current React component's props, registrationName is the name of the event handle prop, i.e "onClick"
let listener = props[registrationName];
// Later, listener is called

So, when you do onClick={this.handleClick}, the method this.handleClick is eventually assigned to the variable listener³. But now you see the problem arise—since we've assigned this.handleClick to listener, we no longer specify exactly where handleClick is coming from! From React's point of view, listener is just some function, not attached to any object (or in this case, React component instance). We have lost context and thus the interpreter cannot infer a this value to use inside handleClick.

Why binding works

You might be wondering, if the interpreter decides the this value at runtime, why can I bind the handler so that it does work? This is because you can use Function#bind to guarantee the this value at runtime. This is done by setting an internal this binding property on a function, allowing it to not infer this:

this.handleClick = this.handleClick.bind(this);

When this line is executed, presumably in the constructor, the current this is captured (the React component instance) and set as an internal this binding of a entirely new function, returned from Function#bind. This makes sure that when this is being calculated at runtime, the interpreter will not try to infer anything, but use the provided this value you given it.

Why arrow function properties work

Arrow function class properties currently work through Babel based on the transpilation:

handleClick = () => { /* Can use this just fine here */ }

Becomes:

constructor() {
  super();
  this.handleClick = () => {}
}

And this works due to the fact arrow functions do not bind their own this, but take the this of their enclosing scope. In this case, the constructor's this, which points to the React component instance—thus giving you the correct this.⁴

---

¹ I use "method" to refer to a function that is supposed to be bound to an object, and "function" for those not.

² In the second snippet, undefined is logged instead of 3 because this defaults to the global execution context (window when not in strict mode, or else undefined) when it cannot be determined via specific context. And in the example window.foo does not exist thus yielding undefined.

³ If you go down the rabbit hole of how events in the event queue are executed, invokeGuardedCallback is called on the listener.

⁴ It's actually a lot more complicated. React internally tries to use Function#apply on listeners for its own use, but this does not work arrow functions as they simply do not bind this. That means, when this inside the arrow function is actually evaluated, the this is resolved up each lexical environment of each execution context of the current code of the module. The execution context which finally resolves to have a this binding is the constructor, which has a this pointing to the current React component instance, allowing it to work.

Answer 3

this problem happen after react15.0 ,which event handler didn't auto bind to the component. so you must bind this to component manually whenever the event handler will be called.

---

there are several methods to solve the problem. but you need to know which method is best and why? In general, we recommend that binding your functions in the class constructor or use a arrow function.

// method 1： use a arrow function
    class ComponentA extends React.Component {
      eventHandler = () => {
        console.log(this)
      }
      render() {
        return ( 
        <ChildComponent onClick={this.eventHandler} /> 
        );
      }

// method 2: Bind your functions in the class constructor.
    class ComponentA extends React.Component {
      constructor(props) {
        super(props);
        this.eventHandler = this.eventHandler.bind(this);
      }
      render() {
        return ( 
        <ChildComponent onClick={this.eventHandler} /> 
        );
      }

these two methods will not creates a new function when the component render everytime. so our ChildComponent will not reRender becaue of the new function props change, or may produce the performance problem.

Answer 4

This issue is happening because this.changeContent and onClick={this.sendContent} are not bound to this of the instance of the component .

There is another solution (In addition to use bind() in the constructor() ) to use the arrow functions of ES6 which share the same lexical scope of the surrounding code and maintain this , so you can change your code in render() to be :

render() {
    return (

        <input type="text"
          onChange={ () => this.changeContent() } /> 

        <button onClick={ () => this.sendContent() }>Submit</button>

    )
  }

Answer 5

We have to bind our function with this to get instance of the function in class. Like so in example

<button onClick={this.sendContent.bind(this)}>Submit</button>

This way this.state will be valid object.

Answer 6

You can tackle this by three ways

1.Bind the event function in the constructor itself as follows

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
    this.changeContent = this.changeContent.bind(this);
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

2.Bind when it is called

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent.bind(this)}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

3.By using Arrow functions

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={()=>this.sendContent()}>Submit</button>
      </div>
    )
  }
}

export default SomeClass