Bill Lumbert Bill Lumbert - 4 months ago 37
Javascript Question

to call onChange event after pressing Enter key

I am new to bootstrap and stuck with this problem. I have an input field and as soon as I enter just one digit, the function from onChange is called, but I want it to be called when I push 'Enter when the whole number has been entered. The same problem for the validation function - it calls too soon.

var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
// bsStyle: this.validationInputFactor(),
placeholder: this.initialFactor,
className: "input-block-level",
onChange: this.handleInput,
block: true,
addonBefore: '%',
ref:'input',
hasFeedback: true
});


Thanks!

Answer

According to React Doc, you should listen to keyboard events, like onKeyPress or onKeyUp, not onChange.

var Input = React.createClass({
  render: function () {
    return <input type="text" onKeyPress={this._handleKeyPress} />;
  },
  _handleKeyPress: function(e) {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }
});

Here is the jsfiddle for this code.