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

Answer 1

Your functions needs binding in order to play with state or props in event handlers

In ES5, bind your event handler functions only in constructor but don't bind directly in render. If you do binding directly in render then it creates a new function every time your component renders and re-renders. So you should always bind it in constructor

this.sendContent = this.sendContent.bind(this)

In ES6, use arrow functions

When you use arrow functions then you no need to do binding and you can also stay away from scope related issues

sendContent = (event) => {

}

Answer 2

In case you want to keep the bind in constructor syntax, you can use the proposal-bind-operator and transform your code like follow :

constructor() {
  this.changeContent = ::this.changeContent;
}

Instead of :

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

much simpler, no need of bind(this) or fatArrow.

Answer 3

We need to bind the event function with the component in constructor 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

Thanks

Answer 4

You can solve this following these steps

Change sendContent function with

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

Change render function with

<input type="text" ref="someref" value={this.state.inputContent} 
          onChange={(event)=>this.changeContent(event)} /> 
   <button onClick={(event)=>this.sendContent(event)}>Submit</button>

Answer 5

if anyone will ever reach this answer, here is a way to bind all of the functions without needing to bind them manually

in the constructor():

for (let member of Object.getOwnPropertyNames(Object.getPrototypeOf(this))) {
    this[member] = this[member].bind(this)
}

or create this function in a global.jsx file

export function bindAllFunctions({ bindTo: dis }) {
for (let member of Object.getOwnPropertyNames(Object.getPrototypeOf(dis))) {
    dis[member] = dis[member].bind(dis)
    }
}

and in your constructor() call it like:

bindAllFunctions({ bindTo: this })

Answer 6

You are using ES6 so functions will not bind to "this" context automatically. You have to manually bind the function to the context.

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