快捷導航

React中實現(xiàn)編輯框自動獲取焦點與失焦更新功能

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

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

實現(xiàn)步驟

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

示例代碼

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

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

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

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

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

export default Editing;

功能描述

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

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

您可能感興趣的文章:

相關(guān)文章

使用webpack搭建react開發(fā)環(huán)境的方法
本篇文章主要介紹了使用webpack搭建react開發(fā)環(huán)境的方法，在這篇文章中我們開始利用我們之前所學搭建一個簡易的React開發(fā)環(huán)境，用以鞏固我們之前學習的Webpack知識。一起跟隨小編過來看看吧
2018-05-05
React?Flux與Redux設(shè)計及使用原理
這篇文章主要介紹了React?Flux與Redux設(shè)計及使用，Redux最主要是用作應(yīng)用狀態(tài)的管理。簡言之，Redux用一個單獨的常量狀態(tài)樹（state對象）保存這一整個應(yīng)用的狀態(tài)，這個對象不能直接被改變
2023-03-03
React拆分窗格組件的兩種方法
這篇文章主要介紹了React拆分窗格組件的兩種方法,使用第三方庫react-split-pane適用于快速實現(xiàn)拆分窗格功能，并且對功能和樣式的要求較為簡單的場景，本文結(jié)合示例代碼介紹的非常詳細，需要的朋友可以參考下
2023-07-07
詳解React 父組件和子組件的數(shù)據(jù)傳輸
這篇文章主要介紹了React 父組件和子組件的數(shù)據(jù)傳輸?shù)南嚓P(guān)資料，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下
2021-04-04
React?Hooks中?useRef和useImperativeHandle的使用方式
這篇文章主要介紹了React?Hooks中?useRef和useImperativeHandle的使用方式,文中說明了useRef和useCallback一起使用,?可以解決閉包陷阱的問題,本文結(jié)合實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-10-10
如何在React項目中引入字體文件并使用詳解
我們項目中通常會需要引入字體,所以下面這篇文章主要給大家介紹了關(guān)于如何在React項目中引入字體文件并使用的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2022-08-08
React Native項目中使用Lottie動畫的方法
這篇文章主要介紹了React Native 實現(xiàn)Lottie動畫的相關(guān)知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2021-10-10
淺談React組件在什么情況下會重新渲染
當我們使用React編寫組件時,組件的重新渲染是一個重要的概念,本文主要介紹了React組件在什么情況下會重新渲染,具有一定的參考價值,感興趣的可以了解一下
2023-12-12
React Mobx狀態(tài)管理工具的使用
這篇文章主要介紹了React Mobx狀態(tài)管理工具的使用，MobX是一個狀態(tài)管理庫，它會自動收集并追蹤依賴，開發(fā)人員不需要手動訂閱狀態(tài)，當狀態(tài)變化之后MobX能夠精準更新受影響的內(nèi)容，另外它不要求state是可JSON序列化的，也不要求state是immutable
2023-02-02
React狀態(tài)管理Redux原理與介紹
redux是redux官方react綁定庫，能夠使react組件從redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以此來更新數(shù)據(jù)，這篇文章主要介紹了react-redux的設(shè)置,需要的朋友可以參考下
2022-08-08