useRef获取DOM元素和保存变量(十)
useRef
在工作中虽然用的不多,但是也不能缺少。它有两个主要的作用:
用
useRef
获取React JSX中的DOM元素,获取后你就可以控制DOM的任何东西了。但是一般不建议这样来作,React界面的变化可以通过状态来控制。用
useRef
来保存变量,这个在工作中也很少能用到,我们有了useContext
这样的保存其实意义不大,但是这是学习,也要把这个特性讲一下。
useRef获取DOM元素
界面上有一个文本框,在文本框的旁边有一个按钮,当我们点击按钮时,在控制台打印出input
的DOM元素,并进行复制到DOM中的value上。这一切都是通过useRef
来实现。
在/src
文件夹下新建一个Example8.js
文件,然后先引入useRef,编写业务逻辑代码如下:
import React, { useRef} from 'react';
function Example8(){
const inputEl = useRef(null)
const onButtonClick=()=>{
inputEl.current.value="Hello ,JSPang"
console.log(inputEl) //输出获取到的DOM节点
}
return (
<>
{/*保存input的ref到inputEl */}
<input ref={inputEl} type="text"/>
<button onClick = {onButtonClick}>在input上展示文字</button>
</>
)
}
export default Example8
当点击按钮时,你可以看到在浏览器中的控制台完整的打印出了DOM的所有东西,并且界面上的<input/>
框的value值也输出了我们写好的Hello ,JSPang
。这一切说明我们可以使用useRef获取DOM元素,并且可以通过useRefu控制DOM的属性和值。
useRef保存普通变量
这个操作在实际开发中用的并不多,但我们还是要讲解一下。就是useRef
可以保存React中的变量。我们这里就写一个文本框,文本框用来改变text
状态。又用useRef
把text
状态进行保存,最后打印在控制台上。写这段代码你会觉的很绕,其实显示开发中没必要这样写,用一个state状态就可以搞定,这里只是为了展示知识点。
接着上面的代码来写,就没必要重新写一个文件了。先用useState
声明了一个text
状态和setText
函数。然后编写界面,界面就是一个文本框。然后输入的时候不断变化。
import React, { useRef ,useState,useEffect } from 'react'; function Example8(){
const inputEl = useRef(null)
const onButtonClick=()=>{
inputEl.current.value="Hello ,useRef"
console.log(inputEl)
}
const [text, setText] = useState('jspang')
return (
<>
{/*保存input的ref到inputEl */}
<input ref={inputEl} type="text"/>
<button onClick = {onButtonClick}>在input上展示文字</button>
<br/>
<br/>
<input value={text} onChange={(e)=>{setText(e.target.value)}} /> </>
)
} export default Example8
这时想每次text
发生状态改变,保存到一个变量中或者说是useRef
中,这时候就可以使用useRef
了。先声明一个textRef
变量,他其实就是useRef
函数。然后使用useEffect
函数实现每次状态变化都进行变量修改,并打印。最后的全部代码如下。
import React, { useRef ,useState,useEffect } from 'react';
function Example8(){
const inputEl = useRef(null)
const onButtonClick=()=>{
inputEl.current.value="Hello ,useRef"
console.log(inputEl)
}
//-----------关键代码--------start
const [text, setText] = useState('jspang')
const textRef = useRef() useEffect(()=>{
textRef.current = text;
console.log('textRef.current:', textRef.current)
})
//----------关键代码--------------end
return (
<>
{/*保存input的ref到inputEl */}
<input ref={inputEl} type="text"/>
<button onClick = {onButtonClick}>在input上展示文字</button>
<br/>
<br/>
<input value={text} onChange={(e)=>{setText(e.target.value)}} />
</>
)
} export default Example8
这时候就可以实现每次状态修改,同时保存到useRef
中了。也就是我们说的保存变量的功能。那useRef
的主要功能就是获得DOM和变量保存,我们都已经讲过了。你的编码能力有增加了一些,让我们一起加油。
转自:https://jspang.com/posts/2019/08/12/react-hooks.html
useRef获取DOM元素和保存变量(十)的更多相关文章
- angular学习笔记-angular中怎么获取dom元素
步骤分解: 第一步:给要获取的元素一个ng-model变量,并且绑定事件啦! <div class="home" ng-model="dirName" n ...
- 通过class和id获取DOM元素的区别
1.通过id获取DOM元素的方法:document.getElementById("id名") 2.通过class获取DOM元素的方法:document.getElementsBy ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- 获取DOM元素位置和尺寸大小
JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
- Vue自定义指令获取DOM元素
我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...
- javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- Vue系列之 => ref获取DOM元素和组件
可以获取DOM元素,和组件中的数据,方法 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
随机推荐
- Android笔记(六十九) 仿微信界面(一)
综合之前的Fragment和自定义组件的知识,实现微信界面 MainActivity.java package cn.lixyz.test; import android.app.Acti ...
- SpringBoot使用MockMVC单元测试Controller
对模块进行集成测试时,希望能够通过输入URL对Controller进行测试,如果通过启动服务器,建立http client进行测试,这样会使得测试变得很麻烦,比如,启动速度慢,测试验证不方便,依赖网络 ...
- C++(四十一) — 多态、虚函数、虚析构函数、纯虚函数
1.多态 面向对象程序设计中,多态性表现为: (1)重载多态:函数重载.运算符重载: (2)运行多态:通过基类的指针(或引用)调用不同派生类的同名函数,表现出不同的行为: (3)模板多态:参数多态, ...
- MPU-6050
MPU-6000(6050)为全球首例整合性6轴运动处理组件,相较于多组件方案,免除了组合陀螺仪与加速器时间轴之差的问题,减少了大量的封装空间.当连接到三轴磁强计时,MPU-60X0提供完整的9轴运动 ...
- Oracle SQL developer客户端 如何连接已经安装完毕的Oracle服务器端
对于刚刚安装完毕Oracle数据库后不知道如何链接使用,可参考以下解决方案. Part 1 首先说服务: 如果正确安装Oracle 11g客户端的朋友们注意了,想要Oracle数据库正常启动有如下三个 ...
- 虚拟机安装Linux从零到登陆成功教学
1.Linux Linux使我们出来windows以外可能接触最多的操作系统了,因为好多超级大的互联网公司,比如阿里等就是用Linux的,所以我们最起码要知道怎样去使用,使用的前提就是我们要有一个这样 ...
- vue路由机制导致的坑,坑,坑
实现一个手机定位的功能: 跳转到指定页面的时候,安卓手机地图定位正常,苹果手机第一次进入页面,地图定位不准, 要刷新后,才可以准确定位,后来无意间不用路由跳转,使用JS跳转,完美解决, 特此记录,方便 ...
- SIGAI机器学习第二十一集 AdaBoost算法2
讲授Boosting算法的原理,AdaBoost算法的基本概念,训练算法,与随机森林的比较,训练误差分析,广义加法模型,指数损失函数,训练算法的推导,弱分类器的选择,样本权重削减,实际应用. 大纲: ...
- 阿里druid数据源配置及数据库密码加密
注意: 1.阿里默认只对用户密码解密 2.druid 1.0.16版本及以上的解密时需要同时配置publicKey 一.生成密文密码 1 前提:已经配置了jdk环境 1.生成密文密码需要准备druid ...
- linux学习2 Linux云计算学习环境介绍
一.VNC: Virtual Network Computing协议.虚拟网络计算协议. vncviewer:client vncserver:server