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