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

列印頁面