我是 Bootstrap 的新手，并被这个问题所困扰。我有一个输入字段，只要我输入一个数字，onChange就会调用from 函数，但是我希望在输入整个数字后按“Enter”时调用它。验证函数也有同样的问题——它调用得太快了。
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。
var Input = React.createClass({
render: function () {
return <input type="text" onKeyDown={this._handleKeyDown} />;
},
_handleKeyDown: function(e) {
if (e.key === 'Enter') {
console.log('do validate');
}
}
});
这是使用 React.Component 做同样事情的代码
class Input extends React.Component {
_handleKeyDown = (e) => {
if (e.key === 'Enter') {
console.log('do validate');
}
}
render() {
return <input type="text" onKeyDown={this._handleKeyDown} />
}
}
这是jsfiddle。
const Input = () => {
const handleKeyDown = (event) => {
if (event.key === 'Enter') {
console.log('do validate')
}
}
return <input type="text" onKeyDown={handleKeyDown} />
}
您可以直接在输入字段上使用 onKeyPress。onChange 函数在每次输入字段更改时更改状态值，按下 Enter 后，它将调用函数 search()。
<input
type="text"
placeholder="Search..."
onChange={event => {this.setState({query: event.target.value})}}
onKeyPress={event => {
if (event.key === 'Enter') {
this.search()
}
}}
/>
按下Enter表单控件（输入）通常会触发表单上的submit( onSubmit) 事件。考虑到您可以通过这种方式处理它（如果您只有一个输入，则可以选择提交按钮）：
const { useState } = React;
function App() {
const [text, setText] = useState("");
const [submitted, setSubmitted] = useState('');
function handleChange(e) {
setText(e.target.value);
}
function handleSubmit(e) {
e.preventDefault();
setSubmitted(text);
setText("");
}
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" value={text} onChange={handleChange} />
<input type="submit" value="add" />
</form>
submitted: {submitted}
</div>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<div id="root"></div>隐式表单提交（submit事件 on Enter）在以下情况下执行：
更多关于它在这里。
或者，您可以将您的处理程序绑定到blur( onBlur) 事件，该事件在input焦点被移除时发生（例如，跳转到下一个可以获得焦点的元素）。
您可以使用 event.key
function Input({onKeyPress}) {
return (
<div>
<h2>Input</h2>
<input type="text" onKeyPress={onKeyPress}/>
</div>
)
}
class Form extends React.Component {
state = {value:""}
handleKeyPress = (e) => {
if (e.key === 'Enter') {
this.setState({value:e.target.value})
}
}
render() {
return (
<section>
<Input onKeyPress={this.handleKeyPress}/>
<br/>
<output>{this.state.value}</output>
</section>
);
}
}
ReactDOM.render(
<Form />,
document.getElementById("react")
)<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>react用户，这是完整性的答案。
react版本 16.4.2
您要么想为每次击键更新，要么仅在提交时获取值。将关键事件添加到组件中是可行的，但官方文档中推荐了替代方法。
受控与非受控组件
受控
在 HTML 中，诸如 input、textarea 和 select 之类的表单元素通常会维护自己的状态并根据用户输入进行更新。在 React 中，可变状态通常保存在组件的 state 属性中，并且仅通过 setState() 更新。
我们可以通过使 React 状态成为“单一的事实来源”来将两者结合起来。然后呈现表单的 React 组件还控制后续用户输入时该表单中发生的事情。以这种方式由 React 控制其值的输入表单元素称为“受控组件”。
如果您使用受控组件，则必须在每次更改值时保持状态更新。为此，您将事件处理程序绑定到组件。在文档的示例中，通常是 onChange 事件。
例子：
1）在构造函数中绑定事件处理程序（值保持在状态）
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
2) 创建处理函数
handleChange(event) {
this.setState({value: event.target.value});
}
3）创建表单提交函数（值取自状态）
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
4) 渲染
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
如果您使用受控组件，您的handleChange函数将始终被触发，以更新并保持正确的状态。状态将始终具有更新的值，并且在提交表单时，将从状态中获取该值。如果您的表单很长，这可能是一个骗局，因为您必须为每个组件创建一个函数，或者编写一个简单的函数来处理每个组件的值变化。
不受控制
在大多数情况下，我们建议使用受控组件来实现表单。在受控组件中，表单数据由 React 组件处理。另一种选择是不受控制的组件，其中表单数据由 DOM 本身处理。
要编写不受控制的组件，您可以使用 ref 从 DOM 获取表单值，而不是为每个状态更新编写事件处理程序。
这里的主要区别在于您不使用onChange函数，而是使用onSubmit表单来获取值，并在必要时进行验证。
例子：
1) 绑定事件处理程序并在构造函数中创建 ref 到输入（状态中没有保留值）
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
}
2）创建表单提交函数（取自DOM组件的值）
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
3) 渲染
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
如果使用不受控制的组件，则无需绑定handleChange函数。提交表单时，将从 DOM 中获取值，此时可以进行必要的验证。也无需为任何输入组件创建任何处理程序函数。
你的问题
现在，对于您的问题：
...我希望在输入整数后按“Enter”时调用它
如果要实现此目的，请使用不受控制的组件。如果没有必要，不要创建 onChange 处理程序。该enter键将提交表单并handleSubmit触发该函数。
你需要做的改变：
删除元素中的 onChange 调用
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
});
处理表单提交并验证您的输入。您需要从表单提交函数中的元素中获取值，然后进行验证。确保在构造函数中创建对元素的引用。
handleSubmit(event) {
// Get value of input field
let value = this.input.current.value;
event.preventDefault();
// Validate 'value' and submit using your own api or something
}
使用不受控制的组件的示例：
class NameForm extends React.Component {
constructor(props) {
super(props);
// bind submit function
this.handleSubmit = this.handleSubmit.bind(this);
// create reference to input field
this.input = React.createRef();
}
handleSubmit(event) {
// Get value of input field
let value = this.input.current.value;
console.log('value in input field: ' + value );
event.preventDefault();
// Validate 'value' and submit using your own api or something
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);