我刚开始使用Bootstrap，现在遇到了一个问题。我有一个输入框，只要我输入一个数字，就会调用onChange函数，但是我希望在整个数字输入完后按下“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文档，你可以监听键盘事件，例如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} />
}
<input
type="text"
placeholder="Search..."
onChange={event => {this.setState({query: event.target.value})}}
onKeyPress={event => {
if (event.key === 'Enter') {
this.search()
}
}}
/>
onKeyPress={this.yourFunc}，否则每次渲染都会重新创建一个箭头函数。 - ViktoronKeyPress={(event) => event.key === 'Enter' && this.search()}。 - camden_kidonKeyPress已被弃用，请使用onKeyUp。 - Eduards在表单控件（input）中按下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>隐式表单提交（Enter 键触发 submit 事件）会在以下情况下进行：
更多信息请参见此处。
或者你可以将处理程序绑定到 input 上的 blur (onBlur) 事件上，在焦点被移除时触发（例如，通过按 Tab 键移动到下一个可获得焦点的元素）。
event.target.value 不可用。 - Izkata您可以使用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>我更喜欢使用onKeyUp，因为它只在松开按键时触发。而onKeyDown则会在某些情况下多次触发，比如用户按住某个按键不放。例如，在监听用户是否按下"Enter"键来进行网络请求时，我们不希望它多次触发，因为这可能会很耗费资源。
// handler could be passed as a prop
<input type="text" onKeyUp={handleKeyPress} />
handleKeyPress(e) {
if (e.key === 'Enter') {
// do whatever
}
}
此外，要避免使用keyCode，因为它将在不久的将来被弃用。
React用户，这里有一个完整的答案。
React版本为16.4.2
您可以选择在每次按键时更新，或仅在提交时获取值。将键事件添加到组件中可以工作，但官方文档中也推荐了其他方法。
受控组件 vs 非受控组件
受控组件
来自文档 - 表单和受控组件：
在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) Render
<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本身处理。onChange函数，而是使用表单的onSubmit来获取值，并在必要时进行验证。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')
);
<input
ref={addressInputRef}
type="text"
name="event[location]"
className="w-full"
defaultValue={location}
onChange={(value) => setLocation(value)}
onKeyDown={(e) => {
if (e.code === "Enter") {
e.preventDefault()
}
}}
/>
const onEnter = (event, callback) => event.key === 'Enter' && callback()
<input
type="text"
placeholder="Title of todo"
onChange={e => setName(e.target.value)}
onKeyPress={e => onEnter(e, addItem)}/>
这个比其他所有解决方案都要好：
<!-- html -->
<input type="text" onkeydown='handleKeyPress(this)'>
...
// js
function handleKeyPress(e)
{
if (event.key === 'Enter')
{
// call your method here
}
}
const [value, setValue] = useState("");
const handleOnChange = (e) => {
setValue(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
addTodoItem(value.trim());
setValue("");
};
return (
<form onSubmit={handleSubmit}>
<input value={value} onChange={handleOnChange}></input>
</form>
);
onBlur事件。 - wuct<input ref='reference' onKeyUp={(e) => {(e.keyCode === 13 ? doSomething(this.refs.reference.value) : null)}} />- musemindref。<input onKeyPress={e => doSomething(e.target.value)}就足够了。 - wuctonKeyPress事件时创建一个新函数。这是一种微小的性能优化。 - wuctonKeyUp，因为它只会在松开按键时触发。另一方面，如果用户按住键不放，onKeyDown将会多次触发。 - kawerewagaba