如何在React中实现编辑框自动获取焦点与失焦更新功能

概述

在React应用中,编辑框的焦点控制和数据回填是一个常见需求。本文将介绍如何使用useRefuseEffect钩子,在组件中实现输入框自动获取焦点及失焦后更新数据的功能。

实现步骤
  1. 引入钩子 : 在组件中引入useEffectuseRef钩子。

  2. 创建引用 : 使用useRef创建一个引用(ref),并将其赋值给输入框的ref属性,以便能够访问输入框的DOM元素。

  3. 自动获取焦点 : 通过useEffect钩子监听isEditing状态。当isEditingtrue时,使用引用ref.current.focus()让输入框自动获取焦点。

  4. 失焦更新数据 : 在输入框的onBlur事件中,调用modifyTodoTitle(ref.current.value)函数,用于在输入框失去焦点时更新数据。

示例代码
javascript 复制代码
import React, { useEffect, useRef } from 'react';

function Editing({ todo }) {
  // 从 todo 对象中解构出 isEditing 状态和 modifyTodoTitle 函数
  const { isEditing, modifyTodoTitle } = todo;

  // 创建一个引用,用于访问输入框 DOM 元素
  const ref = useRef(null);

  // 使用 useEffect 钩子,在 isEditing 状态变为 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对象,其中包含待办事项的标题和编辑状态。使用useRef创建一个引用,这样在组件的整个生命周期内都可以持续访问相同的DOM元素。useEffect钩子确保在isEditing状态为true时,输入框能够自动获得焦点。此外,当用户完成编辑并点击其他地方导致输入框失去焦点时,onBlur事件触发,调用modifyTodoTitle函数来更新待办事项的标题。


English Version

How to Implement Auto-Focus and Data Backfilling for Edit Fields in React

Overview

Controlling focus and backfilling data in edit fields are common requirements in React applications. This article explains how to use the useRef and useEffect hooks to implement auto-focus for an input field and update data after it loses focus.

Implementation Steps
  1. Import Hooks : Import useEffect and useRef hooks in the component.

  2. Create a Reference : Use useRef to create a reference (ref) and assign it to the ref attribute of the input field to access the input field's DOM element.

  3. Auto-Focus : Utilize the useEffect hook to listen for changes in the isEditing state. When isEditing is true, use the reference ref.current.focus() to automatically focus the input field.

  4. Update Data on Blur : In the onBlur event of the input field, invoke the modifyTodoTitle(ref.current.value) function to update data when the input field loses focus.

Example Code
javascript 复制代码
import React, { useEffect, useRef } from 'react';

function Editing({ todo }) {
  // Destructure the isEditing state and the modifyTodoTitle function from the todo object
  const { isEditing, modifyTodoTitle } = todo;

  // Create a ref to access the input box DOM element
  const ref = useRef(null);

  // Use the useEffect hook to set focus to the input box when the isEditing state becomes true
  useEffect(() => {
    if (isEditing) {
      ref.current.focus();
    }
  }, [isEditing]);

  return (
    <input
      ref={ref}
      className="edit"
      defaultValue={todo.title} // Display the current title of the todo item in the input box
      onBlur={() => modifyTodoTitle(ref.current.value)} // Call modifyTodoTitle to update the title when the input box loses focus
    />
  );
}

export default Editing;
Feature Description

In the code above, the Editing component receives a todo object, which contains the title of the to-do item and its editing state. A reference is created using useRef, allowing continuous access to the same DOM element throughout the component's lifecycle. The useEffect hook ensures that the input field automatically receives focus when the isEditing state is true. Additionally, when the user finishes editing and clicks elsewhere causing the input field to lose focus, the onBlur event triggers, invoking the modifyTodoTitle function to update the title of the to-do item.

相关推荐
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
爱编程的喵8 小时前
React Router Dom 初步:从传统路由到现代前端导航
前端·react.js
每天吃饭的羊9 小时前
react中为啥使用剪头函数
前端·javascript·react.js
谢尔登10 小时前
【React Native】样式、网络请求和Loading
网络·react native·react.js
TimelessHaze11 小时前
深入理解 JavaScript Event Loop:从原理到实战全解析
前端·javascript·react.js
G等你下课11 小时前
为什么你需要 useLayoutEffect?深入理解同步副作用
前端·react.js
Jackson_Mseven11 小时前
🎯 面试官:React 并发更新怎么调度的?我:Lane 就是调度界的 bitmap!
前端·react.js·面试
遂心_11 小时前
#React Router Dom 入门:构建现代单页面应用的前端路由方案
前端·javascript·react.js
爱编程的喵11 小时前
React Hooks + 自定义Hooks 打造现代化 Todo 应用:记事本
前端·react.js
对我的心脏有害14 小时前
我偷偷给公司项目用了自己写的状态管理库,同事:结局舒服了
vue.js·react.js