ReactJS - FocusEvent 处理程序

在 React 18 中，有一个名为 FocusEvent 的事件处理程序，它是 Web 开发中的一个重要组件。它们允许我们跟踪网页元素何时获得或失去焦点。这些事件可以通过利用 onFocus 和 onBlur 事件处理程序在 React 中进行处理。因此，我们将了解语法和一个小应用程序来展示此事件处理程序函数的使用。

语法

<input
   onFocus={e => console.log('onFocus')}
   onBlur={e => console.log('onBlur')}
/>

FocusEvent 函数

为了处理与焦点相关的事件，React 为我们提供了两个事件处理程序：

onFocus - 当元素获得焦点时，将调用此事件处理程序。
onBlur - 当元素失去焦点时，将调用此事件处理程序。

焦点和失焦事件

当我们点击一个输入字段，例如按钮或 Web 开发中的任何其他活动元素时，它将成为焦点元素。当我们点击其他地方或按下“Tab”键切换到另一个元素时，原始元素将失去焦点，这被称为失焦事件。

FocusEvent 对象

在 React 中，当其中一个焦点事件发生时，一个事件对象（通常称为 e）将被提供给事件处理程序方法。此对象包含与事件相关的数据。事件对象包含某些焦点事件的额外属性，例如 relatedTarget，并继承了 UIEvent 的功能，例如 detail 和 view。

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("I am onFocus")} - 此部分说明当我们点击或“聚焦”输入字段时，它应该做一些事情。并且它应该将消息“I am onFocus”记录到控制台。这是一种跟踪输入字段何时引起我们注意的方式。

onBlur={(e) => console.log("I am onBlur")} - 同样，当我们从输入字段点击离开或“失焦”时，它将向控制台显示消息“I am 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;

输出

在此应用中，用户在输入字段获得和失去焦点时会收到有关输入密码强度的反馈。强度根据密码的长度进行评估。我们可以通过添加更多密码强度标准来进一步增强此应用。

示例 - 表单验证应用

让我们使用 FocusEvent 处理程序创建一个简单的表单验证的 React 应用。因此，在此应用中，我们将创建一个包含姓名和电子邮件输入字段的表单。然后，我们将使用 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 中使用焦点事件。

reactjs_reference_api.htm

打印页面