按Enter键后调用onChange事件 [英] to call onChange event after pressing Enter key

查看:498
本文介绍了按Enter键后调用onChange事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是Bootstrap的新手并坚持这个问题。我有一个输入字段,只要我输入一个数字,就会调用 onChange 中的函数,但是当我按下'输入整个时'时我希望它被调用号码已输入。验证函数也存在同样的问题 - 它调用太快。

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


推荐答案

根据 React Doc ,您可以收听键盘事件,例如 onKeyPress onKeyUp ,而非 onChange

According to React Doc, you could 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');
    }
  }
});



更新:使用React.Component



下面是使用React.Component执行相同操作的代码

Update: Use React.Component

Here is the code using React.Component which do the same thing

class Input extends React.Component {
  _handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }

  render() {
    return <input type="text" onKeyPress={this._handleKeyPress} />
  }
}

这是 jsfiddle

这篇关于按Enter键后调用onChange事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆