我是新的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
});
当前回答
在表单控件(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)事件(例如，标签到下一个可以获得焦点的元素)。
其他回答
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>
);
下面是使用基于类的组件的一个常见用例:父组件提供一个回调函数，子组件呈现输入框，当用户按Enter键时，我们将用户的输入传递给父组件。
class ParentComponent extends React.Component {
processInput(value) {
alert('Parent got the input: '+value);
}
render() {
return (
<div>
<ChildComponent handleInput={(value) => this.processInput(value)} />
</div>
)
}
}
class ChildComponent extends React.Component {
constructor(props) {
super(props);
this.handleKeyDown = this.handleKeyDown.bind(this);
}
handleKeyDown(e) {
if (e.key === 'Enter') {
this.props.handleInput(e.target.value);
}
}
render() {
return (
<div>
<input onKeyDown={this.handleKeyDown} />
</div>
)
}
}
在表单控件(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)事件(例如，标签到下一个可以获得焦点的元素)。
根据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。组件
下面是使用React的代码。组件，它做同样的事情
class Input extends React.Component {
_handleKeyDown = (e) => {
if (e.key === 'Enter') {
console.log('do validate');
}
}
render() {
return <input type="text" onKeyDown={this._handleKeyDown} />
}
}
这是jsfiddle。
更新2:使用功能组件
const Input = () => {
const handleKeyDown = (event) => {
if (event.key === 'Enter') {
console.log('do validate')
}
}
return <input type="text" onKeyDown={handleKeyDown} />
}
你可以使用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>
