使用 onBlur 进行 React.js JSX 事件的客户端检查
介绍
HTML 中的一个常见事件是onBlur，其中输入元素在传递到另一个元素时失去焦点。这通常在用户点击 tab 或单击下一个输入元素时发生。捕获此事件并将逻辑应用于它允许其他 UI 交互，例如在释放焦点时验证用户输入。这样，用户就不必等到提交输入后才发现出了什么问题。这个简单的例子将演示如何在 React.js 组件的上下文中将逻辑与onBlur事件挂钩。
设置
假设您有一个以 React.js 组件形式接受用户名和密码的登录表单。
import React from 'react';
export default class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: "",
messageUsername: "",
messagePassword: ""
}
}
render() {
return (
<div>
<label>
Username:
</label>
<input
type="text"
/>
{this.state.messageUsername}
<br/>
<label>
Password:
</label>
<input
type="password"
/>
{this.state.messagePassword}
<hr/>
<button>
Login
</button>
</div>
);
}
}
该组件维护以下状态值：
- username：保存用户输入的用户名的变量
- password：保存用户输入密码的变量
- messageUsername：当用户失去用户名输入的焦点并且传递某些条件以调用与用户名相关的通知时显示的消息。
- messagePassword：当用户失去密码输入的焦点并且传递某些条件以调用与密码相关的通知时显示的消息。
事件处理程序
你应该有一个事件处理函数，当onBlur事件发生时，该函数会被触发。为此，首先定义所需的函数：
handleOnBlurUsername(event) {
var username = event.target.value;
var messageUsername = "";
if(!username) {
messageUsername = "Username required";
}
this.setState({
username: username,
messageUsername: messageUsername
});
}
该函数的逻辑非常简单。首先，它通过从event.target.value访问输入的用户名来获取它。接下来，它为临时的messageUsername变量设置一个空白值。您应用一个简单的规则来检查username是否有值。如果没有，则为messageUsername填写“需要用户名”的值。该函数以更新此组件的username和messageUsername的状态结束。
绑定到 onBlur
给定您的事件处理程序，将函数附加到用户名的输入元素，如下所示：
<input
type="text"
onBlur={this.handleOnBlurUsername.bind(this)}
/>
确保在函数之后调用.bind(this)以保留this指向组件的实例。
现在该函数已附加到输入，如果用户离开或释放对用户名输入元素的焦点且未输入任何内容，则将为messageUsername设置一条消息，该消息将显示在输入元素下方，从而通知用户他们需要输入用户名。
总体代码
整体代码应如下所示：
import React from 'react';
export default class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: "",
messageUsername: "",
messagePassword: ""
}
}
handleOnBlurUsername(event) {
var username = event.target.value;
var messageUsername = "";
if(!username) {
messageUsername = "Username required";
}
this.setState({
username: username,
messageUsername: messageUsername
});
}
render() {
return (
<div>
<label>
Username:
</label>
<input
type="text"
onBlur={this.handleOnBlurUsername.bind(this)}
/>
{this.state.messageUsername}
<br/>
<label>
Password:
</label>
<input
type="password"
/>
{this.state.messagePassword}
<hr/>
<button>
Login
</button>
</div>
);
}
}
Test it out by first clicking the username input element and then immediately pressing tab or clicking the password input element to release focus from the username input. The message should then appear after the focus is released if nothing was put in.
结论
HTML 中有许多事件，您可以附加事件处理程序来添加其他逻辑并创建更具交互性的用户体验。当焦点从上下文中的输入元素上丢失时，会触发onBlur。在 React.js 中，我们通过传递组件中定义的方法来绑定事件处理程序，以便相应地调用该方法。调用.bind(this)是为了保留this的值并在事件处理程序函数中公开组件方法，例如this.setState。
如果您注意到代码，会发现只实现了用户名处理。作为额外的练习，请尝试本指南中讨论的相同方法，将事件处理程序附加到onBlur中，用于组件的密码部分。尝试添加其他规则，以更改每个输入元素下方显示的消息（如果调用该规则）。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~