React中实现编辑框自动获取焦点与失焦更新功能
作者：慕仲卿
在React应用中,编辑框的焦点控制和数据回填是一个常见需求,本文将介绍如何使用useRef和useEffect钩子,在组件中实现输入框自动获取焦点及失焦后更新数据的功能,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下
实现步骤
引入钩子: 在组件中引入
useEffect和useRef钩子。创建引用: 使用
useRef创建一个引用（ref），并将其赋值给输入框的ref属性，以便能够访问输入框的DOM元素。自动获取焦点: 通过
useEffect钩子监听isEditing状态。当isEditing为true时，使用引用ref.current.focus()让输入框自动获取焦点。失焦更新数据: 在输入框的
onBlur事件中，调用modifyTodoTitle(ref.current.value)函数，用于在输入框失去焦点时更新数据。
示例代码
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函数来更新待办事项的标题。
以上就是React中实现编辑框自动获取焦点与失焦更新功能的详细内容，更多关于React编辑框获取焦点与失焦的资料请关注脚本之家其它相关文章！