当前位置: 首页 > article >正文

【React】获取DOM

1. 获取/操作dom的方式

  • 方式: 使用useRef钩子函数

2. 步骤

  1. 使用useRef创建ref对象,并与jsx绑定
  2. 在dom可用(指的是渲染完毕dom生成之后)时,通过inputRef.current拿到DOM对象
import { useRef } from "react"

function App() {
  const inputRef = useRef(null)
  function showMsg() {
    console.log(inputRef)
  }
  return (
    <div className="App">
      <input ref={inputRef}></input>
      <button onClick={showMsg}>click me</button>
    </div>
  );
}

export default App;

在这里插入图片描述


http://www.kler.cn/a/320108.html

相关文章:

  • CNCF云原生计算基金会
  • leetcode 面试经典 150 题:快乐数
  • C#,图论与图算法,任意一对节点之间最短距离的弗洛伊德·沃肖尔(Floyd Warshall)算法与源程序
  • 活动预告 | CCF开源发展委员会开源供应链安全技术研讨会(2025第一期)——“大模型时代的开源供应链安全风控技术”...
  • 39.【4】CTFHUB web sql 布尔注入
  • 【MySQL】MVCC详解, 图文并茂简单易懂
  • Mac 安装一系列工具文章汇总
  • 深度学习:调整学习率
  • ubuntu24.04系统openjdk17源码编译openjdk17
  • 【GUI设计】基于图像分割和边缘算法的GUI系统(7),matlab实现
  • 进制数知识(2)—— 浮点数在内存中的存储 和 易混淆的二进制知识总结
  • 【踩坑笔记】vue3 element-plus el-input 无法输入问题
  • php在线相册
  • 计算机丢失mfc110.dll是什么原因与有哪些解决方法详解
  • 10.Lab Nine —— file system-下
  • CorePress Pro 网站加载慢 WordPress
  • 计算机毕业设计 基于 Hadoop平台的岗位推荐系统 SpringBoot+Vue 前后端分离 附源码 讲解 文档
  • JavaScript window的open和close用法
  • LeetCode 面试经典150题 137.只出现一次的数字II
  • 深入探索 RUM 与全链路追踪:优化数字体验的利器
  • Python有常用库学习整理(一)
  • ThreadPoolExecutor的原理?
  • 【大数据】元数据是解锁数据价值的关键
  • JPA+Thymeleaf增删改查
  • WPF 绑定 DataGrid 里面 Button点击事件 TextBlock 双击事件
  • 免杀笔记 ---> 无痕Hook?硬件断点 Syscall!