快捷導(dǎo)航

React中實(shí)現(xiàn)編輯框自動(dòng)獲取焦點(diǎn)與失焦更新功能

更新時(shí)間：2024年01月10日 08:24:55 作者：慕仲卿

在React應(yīng)用中,編輯框的焦點(diǎn)控制和數(shù)據(jù)回填是一個(gè)常見需求,本文將介紹如何使用useRef和useEffect鉤子,在組件中實(shí)現(xiàn)輸入框自動(dòng)獲取焦點(diǎn)及失焦后更新數(shù)據(jù)的功能,文中通過代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下

實(shí)現(xiàn)步驟

引入鉤子: 在組件中引入useEffect和useRef鉤子。
創(chuàng)建引用: 使用useRef創(chuàng)建一個(gè)引用（ref），并將其賦值給輸入框的ref屬性，以便能夠訪問輸入框的DOM元素。
自動(dòng)獲取焦點(diǎn): 通過useEffect鉤子監(jiān)聽isEditing狀態(tài)。當(dāng)isEditing為true時(shí)，使用引用ref.current.focus()讓輸入框自動(dòng)獲取焦點(diǎn)。
失焦更新數(shù)據(jù): 在輸入框的onBlur事件中，調(diào)用modifyTodoTitle(ref.current.value)函數(shù)，用于在輸入框失去焦點(diǎn)時(shí)更新數(shù)據(jù)。

示例代碼

import React, { useEffect, useRef } from 'react';

function Editing({ todo }) {
  // 從 todo 對(duì)象中解構(gòu)出 isEditing 狀態(tài)和 modifyTodoTitle 函數(shù)
  const { isEditing, modifyTodoTitle } = todo;

  // 創(chuàng)建一個(gè)引用，用于訪問輸入框 DOM 元素
  const ref = useRef(null);

  // 使用 useEffect 鉤子，在 isEditing 狀態(tài)變?yōu)?true 時(shí)將焦點(diǎn)設(shè)置到輸入框
  useEffect(() => {
    if (isEditing) {
      ref.current.focus();
    }
  }, [isEditing]);

  return (
    <input
      ref={ref}
      className="edit"
      defaultValue={todo.title} // 輸入框顯示待辦事項(xiàng)的當(dāng)前標(biāo)題
      onBlur={() => modifyTodoTitle(ref.current.value)} // 當(dāng)輸入框失去焦點(diǎn)時(shí)，調(diào)用 modifyTodoTitle 更新標(biāo)題
    />
  );
}

export default Editing;

功能描述

在上述代碼中，Editing組件接收一個(gè)todo對(duì)象，其中包含待辦事項(xiàng)的標(biāo)題和編輯狀態(tài)。使用useRef創(chuàng)建一個(gè)引用，這樣在組件的整個(gè)生命周期內(nèi)都可以持續(xù)訪問相同的DOM元素。useEffect鉤子確保在isEditing狀態(tài)為true時(shí)，輸入框能夠自動(dòng)獲得焦點(diǎn)。此外，當(dāng)用戶完成編輯并點(diǎn)擊其他地方導(dǎo)致輸入框失去焦點(diǎn)時(shí)，onBlur事件觸發(fā)，調(diào)用modifyTodoTitle函數(shù)來更新待辦事項(xiàng)的標(biāo)題。

以上就是React中實(shí)現(xiàn)編輯框自動(dòng)獲取焦點(diǎn)與失焦更新功能的詳細(xì)內(nèi)容，更多關(guān)于React編輯框獲取焦點(diǎn)與失焦的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: