React中實現(xiàn)編輯框自動獲取焦點與失焦更新功能
更新時間：2024年01月10日 08:24:55 作者：慕仲卿
在React應用中,編輯框的焦點控制和數(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事件中，調用modifyTodoTitle(ref.current.value)函數(shù)，用于在輸入框失去焦點時更新數(shù)據(jù)。
示例代碼
import React, { useEffect, useRef } from 'react';
function Editing({ todo }) {
// 從 todo 對象中解構出 isEditing 狀態(tài)和 modifyTodoTitle 函數(shù)
const { isEditing, modifyTodoTitle } = todo;
// 創(chuàng)建一個引用，用于訪問輸入框 DOM 元素
const ref = useRef(null);
// 使用 useEffect 鉤子，在 isEditing 狀態(tài)變?yōu)?true 時將焦點設置到輸入框
useEffect(() => {
if (isEditing) {
ref.current.focus();
}
}, [isEditing]);
return (
<input
ref={ref}
className="edit"
defaultValue={todo.title} // 輸入框顯示待辦事項的當前標題
onBlur={() => modifyTodoTitle(ref.current.value)} // 當輸入框失去焦點時，調用 modifyTodoTitle 更新標題
/>
);
}
export default Editing;
功能描述
在上述代碼中，Editing組件接收一個todo對象，其中包含待辦事項的標題和編輯狀態(tài)。使用useRef創(chuàng)建一個引用，這樣在組件的整個生命周期內都可以持續(xù)訪問相同的DOM元素。useEffect鉤子確保在isEditing狀態(tài)為true時，輸入框能夠自動獲得焦點。此外，當用戶完成編輯并點擊其他地方導致輸入框失去焦點時，onBlur事件觸發(fā)，調用modifyTodoTitle函數(shù)來更新待辦事項的標題。
以上就是React中實現(xiàn)編輯框自動獲取焦點與失焦更新功能的詳細內容，更多關于React編輯框獲取焦點與失焦的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了vue3中獲取ref元素的幾種方式總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了詳解React項目如何修改打包地址（編譯輸出文件地址），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
React-Hook中使用useEffect清除定時器的實現(xiàn)方法
這篇文章主要介紹了React-Hook中useEffect詳解(使用useEffect清除定時器),主要介紹了useEffect的功能以及使用方法，還有如何使用他清除定時器，需要的朋友可以參考下2022-11-11
React入門教程之Hello World以及環(huán)境搭建詳解
Facebook 為了開發(fā)一套更好更適合自己的JavaScript MVC 框架，所以產(chǎn)生了react。后來反響很好,所以于2013年5月開源。下面這篇文章主要給大家介紹了關于React入門教程之Hello World以及環(huán)境搭建的相關資料，需要的朋友可以參考借鑒。2017-07-07
Fiber?可以理解為一個執(zhí)行單元，每次執(zhí)行完一個執(zhí)行單元，React?Fiber就會檢查還剩多少時間，如果沒有時間則將控制權讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React?Fiber架構原理剖析,需要的朋友可以參考下2022-08-08
React Native中的RefreshContorl下拉刷新使用
本篇文章主要介紹了React Native中的RefreshContorl下拉刷新使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
React Native中TabBarIOS的簡單使用方法示例
最近在學習過程中遇到了很多問題,TabBarIOS的使用就是一個，所以下面這篇文章主要給大家介紹了關于React Native中TabBarIOS簡單使用的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2017-10-10
這篇文章主要介紹了詳解如何優(yōu)雅地在React項目中使用Redux，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
React中的Portal允許開發(fā)者將組件渲染到DOM樹的不同位置,本文主要介紹了React中Portal的具體使用,具有一定的參考價值,感興趣的可以了解一下2025-02-02
這篇文章主要為大家介紹了使用React?SSR寫Demo實現(xiàn)教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06