React中的使用ref 操作Dom

跟vue 中的类似 也有ref 操作dom

 由于 React 会自动更新 DOM 以匹配渲染输出,因此组件通常不需要操作 DOM。但是,有时可能需要访问由 React 管理的 DOM 元素——例如聚焦节点、滚动到此节点,以及测量它的尺寸和位置。React 没有内置的方法来执行此类操作,所以需要一个指向 DOM 节点的 ref 来实现。例如,点击按钮将使用 ref 聚焦输入框:

import { useRef } from 'react';export default function Form() {const inputRef = useRef(null);function handleClick() {inputRef.current.focus();}return (<><input ref={inputRef} /><button onClick={handleClick}>聚焦输入框</button></>);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/840991.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Postgresql源码(133)优化器动态规划生成连接路径的实例分析

物理算子的生成分为两步&#xff0c;基表的扫描路径生成set_base_rel_pathlists&#xff1b;连接路径生成&#xff08;make_rel_from_joinlist动态规划&#xff09;。本篇简单分析实现。看过代码会发现&#xff0c;“基表的扫描路径生成”其实就是作为连接路径生成dp计算的第一…

【Mac】MWeb Pro(好用的markdown编辑器) v4.5.9中文版安装教程

软件介绍 MWeb Pro for Mac是一款Mac上的Markdown编辑器软件&#xff0c;它支持实时预览&#xff0c;语法高亮&#xff0c;自动保存和备份等功能&#xff0c;并且有多种主题和样式可供选择。此外&#xff0c;MWeb还支持多种导出格式&#xff0c;包括HTML、PDF、Word、ePub等&a…

栈和队列的经典例题,LeetCode 括号匹配问题;栈实现队列;队列实现栈;队列带环问题

1.前序 又有很久没有更新文章了&#xff0c;这次带你们手撕几道基础题&#xff1b;真的就和康纳吃饭一样简单&#xff01;&#xff01;&#xff01; 如果还不会队列和栈的可以去看看之前写的博客&#xff1b; 栈的实现 队列概念以及实现 <- 快速传送 目录 1.前序 …

HTML中 video标签样式铺满全屏

video标签默认不是铺满的&#xff0c;即使手动设置宽高100%也不会生效&#xff0c;所以当需要video铺满div时&#xff0c;需要加上一个css样式 <videocontrolsstyle"width: 100%; height: 100%; object-fit: fill"autoplay:src"item.video" ></v…

自定义全局变量3

变量删除 语法 unset var_name演示 自定义常量 介绍 就是变量设置值以后不可以修改的变量叫常量, 也叫只读变量 语法 readonly var_name演示 自定义全局变量 父子Shell环境介绍 例如: 有2个Shell脚本文件 A.sh 和 B.sh 如果 在A.sh脚本文件中执行了B.sh脚本文件, 那么A.…

【Web】CISCN 2024初赛 题解(全)

目录 Simple_php easycms easycms_revenge ezjava mossfern sanic Simple_php 用php -r进行php代码执行 因为ban了引号&#xff0c;考虑hex2bin&#xff0c;将数字转为字符串 php -r eval(hex2bin(16进制)); 注意下面这段报错&#xff0c;因为加不了引号&#xff0c;开…

链表-设计LRU缓存结构

题目描述&#xff1a; 代码实现&#xff1a;这里记录了根据LRU算法原理最直接理解的代码实现。 import java.util.*;//存储输入内容&#xff0c;记录访问权值 class CounterInfo {int key;int value;int times;//代表key对应的权值&#xff0c;值越小优先级越高public Counter…

【第2章】SpringBoot配置文件

文章目录 前言一、编写配置信息1. properties2. yml 二、获取配置信息1.直接获取2.配置类形式 总结 前言 SpringBoot工程创建后&#xff0c;会为我们提供一个默认的配置文件(application.properties)&#xff0c;配置文件主要用于那些可能发生变化且经常改变的属性值。 一、编…

Autodesk 3DS Max v2025 解锁版安装教程 (3D 建模软件)

前言 Autodesk 3ds Max 是一款功能强大的 3D 建模和动画解决方案&#xff0c;游戏开发人员、视觉效果艺术家和平面设计师使用它来创建庞大的世界、令人惊叹的场景和引人入胜的虚拟现实 (VR) 体验。 Autodesk 3DS MAX是业界使用最广泛的3D建模和动画软件程序之一&#xff0c;它…

盲盒小程序开发,数字化发展下的优势

近年来&#xff0c;盲盒经济得到了快速发展&#xff0c;不少人开始加入到盲盒大军中&#xff0c;盲盒市场规模不断扩大。 盲盒最大的特点就是能够给消费者带来拆盒的刺激性和惊喜感。盲盒商品大多是动漫手办、周边等&#xff0c;具有较大的收藏价值&#xff0c;因此深深吸引着…

虚拟主机安装modstart

郑重说明!!!&#xff1a;虚拟主机通常无法绑定运行目录到子目录&#xff0c;因此部署时会出现太多的安全隐患&#xff0c;配置比较繁琐&#xff0c;我们强烈不推荐&#xff01;此方法只给技术爱好者作为测试参考&#xff0c;不再提供额外技术支持。 以免费云服务器&#xff0c;…

OpenAI模型GPT-4o、GPT-4、Gemini 1.5性能比较

大家好&#xff0c;OpenAI最新推出的GPT-4o&#xff0c;标志着人工智能语言模型和交互方式迈入了新纪元。最引人注目的是&#xff0c;GPT-4o支持实时互动和流畅的对话切换&#xff0c;让交流更加自然。 本文将对比分析GPT-4o、GPT 4以及谷歌的Gemini和Unicorn模型&#xff0c;…

Redis批量删除指定前缀的key

在redis-cli中键入命令&#xff0c;批量删除前缀为business_login_tokens:的key&#xff1a; eval "return redis.call(del, unpack(redis.call(keys, ARGV[1])))" 0 business_login_tokens:*在Redis中&#xff0c;EVAL命令用于执行Lua脚本。这个特定的命令是用来批…

C#结合JS实现HtmlTable动态添加行并保存到数据库

目录 需求 效果视频演示 范例运行环境 准备数据源 数据表设计 UI及表结构Json配置 Json数据包提交配置 设计实现 前端UI Javascript 脚本 Jquery引用 C# 服务端操作 小结 需求 在 Web 应用项目中&#xff0c;实现一对多录入的数据管理功能是一项常见的应用。因此…

深度学习模型压缩技术分析

模型压缩概述 模型压缩是指通过各种技术手段来减小机器学习模型的大小&#xff0c;以减少存储空间、加快推理速度和降低计算成本的过程。这种技术可以帮助在资源受限的设备上部署更大的模型&#xff0c;提高模型的效率和性能。 模型压缩有多种方法&#xff0c;包括模型剪枝、…

JVM-调优之-如何使用arthas-观察jvm-cpu-内存-垃圾回收等信息

前言&#xff1a; 可以简单代替把dump文件下载下来后用visualvm分析了&#xff1b;跟visualvm类似的&#xff1b; docker中如何安装arthas看这个&#xff1a;docker中怎么使用arthas_arthas 集成到容器镜像-CSDN博客 curl -O https://arthas.aliyun.com/arthas-boot.jar wget …

头歌OpenGauss数据库-I.复杂查询第9关:交换性别

任务描述 本关任务&#xff1a;给定一张 tb_Salary 表&#xff0c;如下所示&#xff0c;有 m 男性 和 f 女性的值。交换所有的 f 和 m 值&#xff08;例如&#xff0c;将所有 f 值更改为 m&#xff0c;反之亦然&#xff09;。 idnamesexsalary1Elonf70002Donnyf80003Careym60…

npm,yarn,cnpm,tyarn,pnpm 安使用装配置镜像

npm 安装 安装node后就可以使用了 官方默认地址 npm config set registry https://registry.npmjs.org 镜像 npm config set registry https://registry.npm.taobao.org npm config set registry http://registry.npmmirror.org全局安装依赖 npm install -g <包名&g…

软考之零碎片段记录(三十一)+复习巩固(错题整理,知识点总结,易错题)

1. 奇偶校验 只能检测一位数的错误。但无法纠正错误。若有奇数个数据位出错&#xff0c;可检测。有局限性。 2. 深度与广度优先遍历 参考题【【数据结构自用】1.图深度优先遍历2.找有向图中的强连通分量数目3.给出图的任意两个拓扑序列】https://www.bilibili.com/video/BV…

在Github上寻找安装ROS软件包

1、创建一个功能包 并下载git sudo apt install git 2、找到自己想在github上要克隆的包 复制此链接 3、克隆到本地 git clone 链接 4.scripts目录用于放置脚本文件和python程序 使用脚本安装编译需要的依赖库 5、下载完成后&#xff0c;在~catkin_ws目录下运行catkin_make进…