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

Question

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

Look, I may be wrong, but I would've thought that this.getInput doesn't need to be bound to this because it already is a property of this ... I'll admit that I can only say I'm 99% sure of how this works, but it just looks like odd (redundant) code to me — Jaromanda X
– Jaromanda X, Commented Jan 20, 2017 at 5:47
@JaromandaX it's needed because I use es6 syntax, try here jsbin.com/qozupufoja/1/edit?html,js,console,output with the code you think that should work. — Zea Lith
– Zea Lith, Commented Jan 20, 2017 at 5:59

TRomesh · Accepted Answer · 2017-01-20 04:15:21Z

4

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')
);

answered Jan 20, 2017 at 4:15

TRomesh

4,4698 gold badges51 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fumihwh · Accepted Answer · 2017-01-20 04:17:25Z

1

You should use this.getInput instead of getInput

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

answered Jan 20, 2017 at 4:17

fumihwh

1,2598 silver badges14 bronze badges

Comments

PranavPinarayi · Accepted Answer · 2017-01-20 05:00:17Z

0

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

answered Jan 20, 2017 at 5:00

PranavPinarayi

3,2275 gold badges25 silver badges33 bronze badges

3 Comments

Felix Kling Over a year ago

Your first suggestion is not valid ES6. It's an experimental feature that requires additional configuration to work.

PranavPinarayi Over a year ago

@FelixKling this.getInput is used for accessing class member function.

Felix Kling Over a year ago

I never disputed that. Maybe I didn't express myself clearly. I was talking about getInput = () => ....

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related