- ReactJS 菜鸟教程
- ReactJS 教程
- ReactJS - 简介
- ReactJS - 安装
- ReactJS - 特性
- ReactJS - 优点和缺点
- ReactJS - 架构
- ReactJS - 创建 React 应用程序
- ReactJS - JSX
- ReactJS - 组件
- ReactJS - 嵌套组件
- ReactJS - 使用组件
- ReactJS - 组件集合
- ReactJS - 样式
- ReactJS - 属性(props)
- ReactJS - 使用属性创建组件
- ReactJS - props 验证
- ReactJS - 构造函数
- ReactJS - 组件生命周期
- ReactJS - 事件管理
- ReactJS - 创建事件感知组件
- ReactJS - 在Expense Manager APP中引入事件
- ReactJS - 状态管理
- ReactJS - 状态管理 API
- ReactJS - 无状态组件
- ReactJS - 使用 React Hooks 进行状态管理
- ReactJS - 使用 React 钩子的组件生命周期
- ReactJS - 组件的布局
- ReactJS - 分页
- ReactJS - Material 用户界面
- ReactJS - Http 客户端编程
- ReactJS - 表单编程
- ReactJS - 受控组件
- ReactJS - 不受控制的组件
- ReactJS - Formik
- ReactJS - 条件渲染
- ReactJS - 列表
- ReactJS - 键
- ReactJS - 路由
- ReactJS - 冗余
- ReactJS - 动画
- ReactJS - 引导程序
- ReactJS - 地图
- ReactJS - 表格
- ReactJS - 使用 Flux 管理状态
- ReactJS - 测试
- ReactJS - CLI 命令
- ReactJS - 构建和部署
- ReactJS - 示例
- ReactJS - 钩子简介
- ReactJS - 使用 useState
- ReactJS - 使用 useEffect
- ReactJS - 使用 useContext
- ReactJS - 使用 useRef
- ReactJS - 使用 useReducer
- ReactJS - 使用 useCallback
- ReactJS - 使用 useMemo
- ReactJS - 自定义钩子
- ReactJS - 可访问性
- ReactJS - 代码拆分
- ReactJS - 上下文
- ReactJS - 错误边界
- ReactJS - 转发引用
- ReactJS - 片段
- ReactJS - 高阶组件
- ReactJS - 与其他库集成
- ReactJS - 优化性能
- ReactJS - 分析器 API
- ReactJS - 门户
- ReactJS - 没有 ES6 ECMAScript 的 React
- ReactJS - 没有 JSX 的 React
- ReactJS - 协调
- ReactJS - 引用和 DOM
- ReactJS - 渲染属性
- ReactJS - 静态类型检查
- ReactJS - 严格模式
- ReactJS - Web 组件
- ReactJS - 日期选择器
- ReactJS - Helmet
- ReactJS - 内联样式
- ReactJS - 属性类型
- ReactJS - 浏览器路由器
- ReactJS - DOM
- ReactJS - 旋转木马
- ReactJS - 图标
- ReactJS - 表单组件
- ReactJS - 参考 API
ReactJS - FocusEvent 处理程序
在 React 18 中,有一个名为 FocusEvent 的事件处理程序,它是 Web 开发的重要组成部分。它们使我们能够跟踪网页元素何时获得或失去焦点。在 React 中,可以通过使用 onFocus 和 onBlur 事件处理程序来处理这些事件。因此,我们将看到语法和一个小应用程序来展示此事件处理函数的使用。
语法
<input
onFocus={e => console.log('onFocus')}
onBlur={e => console.log('onBlur')}
/>
FocusEvent 函数
为了处理与焦点相关的事件,React 为我们提供了两个事件处理程序 -
- onFocus − 当元素获得焦点时,将调用此事件处理程序。
- onBlur - 当元素失去焦点时,将调用此事件处理程序。
对焦和模糊事件
当我们在 Web 开发中单击输入字段(例如按钮或任何其他活动元素)时,它将成为焦点元素。当我们单击其他地方或按“Tab”键切换到另一个元素时,原始元素会失去焦点,这被称为模糊事件。
FocusEvent 对象
在 React 中,当其中一个焦点事件发生时,会向事件处理程序方法提供一个事件对象(通常称为 e)。此对象包含与事件相关的数据。事件对象包含焦点事件的某些额外属性(如 relatedTarget),并继承了 UIEvent 的功能(如详细信息和视图)。
- relatedTarget - 此属性显示哪个元素正在获得或失去注意力。
- detail − 此属性通常用于存储有关事件的附加数据。
- view - 此属性与事件发生的窗口相关。
例子
示例 - 将事件焦点放在输入字段上
现在,让我们通过创建一个小型 React 应用程序将这个概念付诸实践,当输入字段获得和失去焦点时,该应用程序会控制台记录消息。
import React from "react";
function App() {
return (
<div>
<>
<input
onFocus={(e) => console.log("I am onFocus")}// onFocus Event
onBlur={(e) => console.log("I am onBlur")} // onBlur Event
/>
</>
</div>
);
}
export default App;
输出
onFocus={(e) => console.log(“我是onFocus”)} − 这部分指出,当我们在输入字段上单击或“聚焦”时,它应该做一些事情。它应该将消息“我是 onFocus”记录到控制台。这是一种跟踪输入字段何时引起我们注意的方法。
onBlur={(e) => console.log(“我是 onBlur”)} − 同样,当我们从输入字段点击或“模糊”时,它将向控制台显示消息“我是 onBlur”。
示例 - 检查密码强度
在此应用程序中,我们将创建一个密码长度检查器应用程序。它允许用户在输入字段中输入密码。因此,我们将使用 React FocusEvent 处理程序在输入集中和模糊时提供有关密码强度的反馈。
import React, { useState } from "react";
function PasswordStrengthApp() {
const [password, setPassword] = useState("");
const [strengthMessage, setStrengthMessage] = useState("");
const handleFocus = () => {
setStrengthMessage("Please enter a password");
};
const handleBlur = () => {
// Check password strength and provide feedback
if (password.length === 0) {
setStrengthMessage("Password cannot be empty");
} else if (password.length < 6) {
setStrengthMessage("Weak password: Too short");
} else if (password.length < 10) {
setStrengthMessage("Moderate password: Could be stronger");
} else {
setStrengthMessage("Strong password!");
}
};
const handleChange = (e) => {
setPassword(e.target.value);
};
return (
<div>
<label>Password: </label>
<input
type="password"
value={password}
onChange={handleChange}
onFocus={handleFocus}
onBlur={handleBlur}
/>
<div>{strengthMessage}</div>
</div>
);
}
export default PasswordStrengthApp;
输出
在此应用程序中,当输入字段聚焦和模糊时,用户会收到有关输入密码强度的反馈。强度是根据密码的长度来评估的。我们可以通过添加更多密码强度标准来进一步增强此应用程序。
示例 - 表单验证应用程序
让我们创建一个 React 应用程序,使用 FocusEvent 处理程序进行简单的表单验证。因此,在此应用程序中,我们将创建一个表单,其中包含名称和电子邮件的输入字段。然后,我们将使用 React FocusEvent 处理程序在用户关注并离开每个输入字段时提供实时验证反馈。然后,我们将显示消息以显示输入的姓名和电子邮件是否有效。
import React, { useState } from "react";
function FormValidationApp() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [nameError, setNameError] = useState("");
const [emailError, setEmailError] = useState("");
const validateName = () => {
if (!name.trim()) {
setNameError("Name cannot be empty");
} else {
setNameError("");
}
};
const validateEmail = () => {
// Basic email validation regex
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!email.trim()) {
setEmailError("Email cannot be empty");
} else if (!emailRegex.test(email)) {
setEmailError("Invalid email format");
} else {
setEmailError("");
}
};
return (
<div>
<form>
<div>
<label>Name: </label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
onFocus={validateName}
onBlur={validateName}
/>
<div style={{ color: "red" }}>{nameError}</div>
</div>
<div>
<label>Email: </label>
<input
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
onFocus={validateEmail}
onBlur={validateEmail}
/>
<div style={{ color: "red" }}>{emailError}</div>
</div>
</form>
</div>
);
}
export default FormValidationApp;
输出
在此应用中,用户会收到名称和电子邮件字段的实时验证反馈。当用户将焦点放在每个输入字段上并离开时,将显示指示输入的信息是否有效的消息。我们可以根据具体需求定制验证逻辑。
总结
基本上,它显示一个带有空输入字段的网站,并监听我们何时点击它(焦点)和何时点击离开它(模糊),并在控制台中记录消息以通知我们何时发生这些事件。这是一个基本示例,用于了解如何在 React 中处理焦点事件。