我是新的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
});
当前回答
你可以使用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()
}
}}
/>
其他回答
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>
);
您还可以像这样编写一个小的包装器函数
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)}/>
//You can use onkeyup directly on input field
const inputField = document.querySelector("input");
inputField.addEventListener("keyup", e => {
if (e.key == "Enter") {
console.log("hello");
}
});
在表单控件(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>
隐式表单提交(submit event on Enter)在以下情况下执行:
有一个提交按钮 没有提交按钮，但只有一个输入
这里有更多。
或者，你可以将你的处理程序绑定到焦点被移除时发生的输入上的blur (onBlur)事件(例如，标签到下一个可以获得焦点的元素)。
防止输入提交表单的例子，在我的情况下，它是一个谷歌地图位置自动完成输入
<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()
}
}}
/>
