按Enter键后调用onChange事件

我是新的引导和坚持与这个问题。我有一个输入字段,只要我只输入一个数字,就会调用onChange中的函数,但我希望在输入整数后按“回车”时调用该函数。验证函数也有同样的问题——它调用得太快

var inputProcent=React.CreateElement(bootstrap.Input,{type:“text”,
//bsStyle:this.validationInputFactor(),
占位符:this.initialFactor,
类名:“输入块级别”,
onChange:this.handleInput,
布洛克:没错,
addonBefore:“%”,
参考:'输入',
哈斯反馈:是的
});

根据React Doc,您可以收听键盘事件,如onKeyPressonkeypup,而不是onChange

var Input=React.createClass({
渲染:函数(){
return<input type=“text”onKeyDown={this.\u handleKeyDown}/>;
},
_handleKeyDown:功能(e){
如果(e.key=='Enter'){
log('do validate');
}
}
});

更新:使用React.Component

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

类输入扩展了React.Component{
_handleKeyDown=(e)=&gt{
如果(e.key=='Enter'){
log('do validate');
}
}
render(){
return<input type=“text”onKeyDown={this.\u handleKeyDown}/>
}
}

这是jsfiddle

更新2:使用功能组件

常量输入=()=>{
常量handleKeyDown=(事件)=&gt{
如果(event.key=='Enter'){
console.log('do validate')
}
}
return<input type=“text”onKeyDown={handleKeyDown}/>
}

发表评论