按Enter键后再调用onChange事件

我是新手引导，并坚持这个问题。 我有一个input字段，只要input一个数字，onChange中的函数就会被调用，但是当我input整个数字时，按'Enter'时，我会调用它。 validationfunction的相同问题 – 它调用得太快。

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

谢谢！

Answer 1

根据React Doc ，你应该听取键盘事件，如onKeyPress或onKeyUp ，而不是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'); } } }); 

这是这个代码的jsfiddle 。

更新：使用React.Component

这里是使用React.Component做同样的事情的代码

 class Input extends React.Component { _handleKeyPress = (e) => { if (e.key === 'Enter') { console.log('do validate'); } } render() { return <input type="text" onKeyPress={this._handleKeyPress} /> } } 

Answer 2

当表单控件（input）中的焦点通常在表单本身（而不是input）上触发submit （onSubmit）事件时按Enter键 ，以便将this.handleInput绑定到onSubmit表单上。

或者，您可以将其绑定到input上的blur （onBlur）事件，这会在焦点被移除时发生（例如挂钩到可以获得焦点的下一个元素）

Answer 3

您可以直接在input字段上使用onKeyPress。 onChange函数改变每个input字段变化的状态值，按Enter键后将调用函数search（）。

 <input type="text" placeholder="Search..." onChange={event => {this.setState({query: event.target.value})}} onKeyPress={event => { if (event.key === 'Enter') { this.search() } }} />