脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React编辑框获取焦点与失焦

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

 更新时间：2024年01月10日 08:24:55   作者：慕仲卿  
在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编辑框获取焦点与失焦的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • vue3中获取ref元素的几种方式总结

    vue3中获取ref元素的几种方式总结

    这篇文章主要介绍了vue3中获取ref元素的几种方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • 详解React项目如何修改打包地址（编译输出文件地址）

    详解React项目如何修改打包地址（编译输出文件地址）

    这篇文章主要介绍了详解React项目如何修改打包地址（编译输出文件地址），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • React-Hook中使用useEffect清除定时器的实现方法

    React-Hook中使用useEffect清除定时器的实现方法

    这篇文章主要介绍了React-Hook中useEffect详解(使用useEffect清除定时器),主要介绍了useEffect的功能以及使用方法，还有如何使用他清除定时器，需要的朋友可以参考下
    2022-11-11
  • React入门教程之Hello World以及环境搭建详解

    React入门教程之Hello World以及环境搭建详解

    Facebook 为了开发一套更好更适合自己的JavaScript MVC 框架，所以产生了react。后来反响很好,所以于2013年5月开源。下面这篇文章主要给大家介绍了关于React入门教程之Hello World以及环境搭建的相关资料，需要的朋友可以参考借鉴。
    2017-07-07
  • 详解React Fiber架构原理

    详解React Fiber架构原理

    Fiber 可以理解为一个执行单元，每次执行完一个执行单元，React Fiber就会检查还剩多少时间，如果没有时间则将控制权让出去，然后由浏览器执行渲染操作，这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下
    2022-08-08
  • React Native中的RefreshContorl下拉刷新使用

    React Native中的RefreshContorl下拉刷新使用

    本篇文章主要介绍了React Native中的RefreshContorl下拉刷新使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • React Native中TabBarIOS的简单使用方法示例

    React Native中TabBarIOS的简单使用方法示例

    最近在学习过程中遇到了很多问题,TabBarIOS的使用就是一个，所以下面这篇文章主要给大家介绍了关于React Native中TabBarIOS简单使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
    2017-10-10
  • 详解如何优雅地在React项目中使用Redux

    详解如何优雅地在React项目中使用Redux

    这篇文章主要介绍了详解如何优雅地在React项目中使用Redux，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • React中Portal的具体使用

    React中Portal的具体使用

    React中的Portal允许开发者将组件渲染到DOM树的不同位置,本文主要介绍了React中Portal的具体使用,具有一定的参考价值,感兴趣的可以了解一下
    2025-02-02
  • 使用React SSR写Demo一学就会

    使用React SSR写Demo一学就会

    这篇文章主要为大家介绍了使用React SSR写Demo实现教程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06

最新评论