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

Answer 1

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 (
      

        
The input form is here:
        Title: 
         
        Submit
      
    )
  }
}

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 (
      

        
The input form is here:
        Title: 
         
        Submit
      
    )
  }
}

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 (
      

        
The input form is here:
        Title: 
         
        this.sendContent()}>Submit
      
    )
  }
}

export default SomeClass