P09: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 ,mybj123" 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 ,mybj123
。这一切说明我们可以使用useRef
获取 DOM 元素,并且可以通过useRef
控制 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('mybj123') 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('mybj123') 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
GIF 演示:
这时候就可以实现每次状态修改,同时保存到useRef
中了,也就是我们说的保存变量的功能。那useRef
的主要功能就是获得 DOM 和变量保存,到这儿,相信你的编码能力又增加了一些,加油吧!
码云笔记 » P09:useRef获取DOM元素和保存变量