如何在 React-Bootstrap 输入组件上使用 Enter 键事件处理程序
介绍
React-Bootstrap 是一个适用于 React 应用程序的流行的易于使用的 Bootstrap 组件库。
在本指南中，您将了解键盘事件以及如何使用输入控件的回车键事件处理程序提交表单。
在 React 中使用键盘事件
键盘事件在 Web 开发中非常标准。用户使用三种键盘事件与 Web 应用交互：
- 按键按下
- 按键释放
- 按键
当用户触摸、释放或按住按键时会触发这些事件，用于处理特定的用户输入。
任何键盘事件都可以附加到 HTML 元素，如下所述。
<input
type="text"
onKeyUp={this.onKeyUpValue.bind(this)}
/>
正如您在上面的示例中看到的，有一个名为onKeyUp的事件，用于在按下键盘键时立即触发该事件。
如果想获取事件的更新值，可以按照下面的方法获取。
onKeyUpValue(event) {
console.log(event.target.value)
}
使用event.target.value，可以获取更新的值并进一步处理以将表单值提交到服务器。
使用 Enter 键事件处理程序
对于最终用户来说，一旦他们在表单字段中输入值，他们就会按回车键而不是单击提交按钮，这是很正常的。
为了准备该行为，请通过配置onKeyPress事件准备好输入键事件处理，其中手动识别输入键以提交表单。
让我们实现一个 React-Bootstrap 输入表单控件，如上所述。
render() {
const { inputValue } = this.state;
return (
<div>
<InputGroup>
<FormControl placeholder="First name" onKeyPress={this.onKeyUp} />
</InputGroup>
<hr />
<span>Input value is : {inputValue}</span>
</div>
);
}
在上面的例子中，有一个输入组，它将表单控件作为文本输入，并添加属性onKeyPress，用于获取按键事件。
下一步是将事件绑定到当前上下文，如下所示。
constructor() {
super();
this.state = {
name: "React-bootstrap key enter event"
};
this.onKeyUp = this.onKeyUp.bind(this);
}
现在，绑定事件之后，就该实现实际事件了，该事件通过使用charCode为 13（这是回车键的标识符）根据回车键来标识事件，如下所述。
onKeyUp(event) {
if (event.charCode === 13) {
this.setState({ inputValue: event.target.value });
}
}
事件onKeyUp检查由最终用户触发的事件字符代码，如果是13，则表示该事件是由回车键生成的。
否则，状态值不会更新到组件状态对象中。下面是获取更新值并显示给用户的完整代码。
import React, { Component } from "react";
import { InputGroup, FormControl, Input } from "react-bootstrap";
class SimpleKeyEvent extends Component {
constructor() {
super();
this.state = {
name: "React-bootstrap key enter event"
};
this.onKeyUp = this.onKeyUp.bind(this);
}
onKeyUp(event) {
if (event.charCode === 13) {
this.setState({ inputValue: event.target.value });
}
}
render() {
const { inputValue } = this.state;
return (
<div>
<InputGroup>
<FormControl placeholder="First name" onKeyPress={this.onKeyUp} />
</InputGroup>
<hr />
<span>Input value is : {inputValue}</span>
</div>
);
}
}
export default SimpleKeyEvent;
执行上述示例时，您将看到一个输入控件，输入适当的值，然后按 Enter。更新后的值将显示在输入控件下方。
将 Enter 识别为输入控件的键
您可以根据键盘上按键的字符串值来识别所按下的按键。使用按键名称，如下所示。
onKeyUp(event) {
if (event.key === "Enter") {
this.setState({ inputValue: event.target.value });
}
}
只要按下 Enter 键，就可以使用 event.key 识别相应的键。在上面的示例中，按下 Enter 键时，输入值将更新到状态对象中。
结论
React-Bootstrap 输入控件支持所有合成键盘事件，包括onKeyPress、onKeyDown和onKeyUp，以管理来自最终用户的各种键盘事件交互。
在本指南中，您学习了如何检查 Enter 键事件处理程序以及 React-Bootstrap 输入元素。我希望它有助于将输入控件集成到您的 React 应用程序中。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~