CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Zea Lith
Zea Lith

Reputation: 421

"ReferenceError: getInput is not defined" in react input element

class HelloWorldComponent extends React.Component {
  constructor() {
    super()
    this.getInput = this.getInput.bind(this)
  }
  getInput() {
    alert('focused');
  }
  render() {
    return (      
      <input type="text" onFocus={getInput}/>    
    );
  }
}

ReactDOM.render(
  <HelloWorldComponent/>,
  document.getElementById('react_example')
);

What's wrong with this code? can't get the alert to fire, I got getInput is not defined error.

http://jsbin.com/qoduyawaci/1/edit

Upvotes: 1

Views: 1660

Answers (3)

PranavPinarayi
PranavPinarayi

Reputation: 3207

Use this.getInput to call the function. Also you can use arrow functions in ES6 to avoid binding.

getInput = () => {
    alert('focused');
 }

and you can avoid 

this.getInput = this.getInput.bind(this)

in constructor. This is the correct ES6 method.

http://jsbin.com/sebotirito/1/edit?html,js,output

Upvotes: 0

fumihwh
fumihwh

Reputation: 1249

You should use this.getInput instead of getInput

http://jsbin.com/nehadisuvu/1/edit?html,js,output

Upvotes: 1

TRomesh
TRomesh

Reputation: 4481

You forgot to add the correct refference. use this.getInput instead of getInput.

like this

class HelloWorldComponent extends React.Component {
  constructor() {
    super()
    this.getInput = this.getInput.bind(this);
  }
  getInput() {
    alert('focused');
  }
  render() {
    return (      
      <input type="text" onFocus={this.getInput}/>    
    );
  }
}

ReactDOM.render(
  <HelloWorldComponent/>,
  document.getElementById('react_example')
);

Upvotes: 4

Related Questions