P09：useRef获取DOM元素和保存变量

骑猪看日落 2023-10-06 21:01 6阅读 0赞

#### React Hooks ####

*  阐述
 *  useRef 获取DOM元素

## 阐述 ##

useRef 在工作中虽然用的不多，但是也不能缺少。  
它有两个主要的作用：

1、用 useRef 获取 React JSX 中的DOM元素，获取后你就可以控制DOM的任何东西了。  
但是一般不建议这样来做，React界面的变化可以通过状态来控制。

2、用 useRef 来保存变量，这个在工作中也很少能用到，我们有了 useContext 这样的保存其实意义不大，但是这是学习，也要把这个特性讲一下。

## useRef 获取DOM元素 ##

界面上有一个文本框，在文本框的旁边有一个按钮，当我们点击按钮时，在控制台打印出input的DOM元素，并进行复制到DOM中的value上。

这一切都是通过useRef来实现。

在 `/src` 文件夹下新建一个 `Example9.js` 文件，然后先引入 useRef，  
编写业务逻辑代码如下:

`ReactHooksDemo\demo01\src\Example9.js`

import React, {
         useRef} from 'react';
    
    function Example9(){
        
        const inputEl = useRef(null)
        const onButtonClick=()=>{
         
            inputEl.current.value="Hello ,willem"
            console.log(inputEl) //输出获取到的DOM节点
        }
        return (
            <>
                {
        /*保存input的ref到inputEl */}
                <input ref={
        inputEl} type="text"/>
                <button onClick = {
        onButtonClick}>在input上展示文字</button>
            </>
        )
    }
    
    export default Example9

当点击按钮时，你可以看到在浏览器中的控制台完整的打印出了DOM的所有东西，并且界面上的`<input/>`框的value值也输出了我们写好的Hello ,willem。

这一切说明我们可以使用useRef获取DOM元素，并且可以通过useRef控制DOM的属性和值。

![在这里插入图片描述][567662c0438b4d97ba6ff3d27cb5751c.gif_pic_center]

useRef 保存普通变量

这个操作在实际开发中用的并不多，但我们还是要讲解一下。

就是useRef可以保存React中的变量。

我们这里就写一个文本框，文本框用来改变text状态。

又用 useRef 把 text 状态进行保存，最后打印在控制台上。

写这段代码你会觉的很绕，其实显示开发中没必要这样写，用一个state状态就可以搞定，这里只是为了展示知识点。

接着用useState声明了一个text状态和setText函数。

然后编写界面，界面就是一个文本框。

然后输入的时候不断变化。

`ReactHooksDemo\demo01\src\Example10.js`

import React, {
         useRef ,useState,useEffect } from 'react';
    
    function Example10(){
        
        const inputEl = useRef(null)
        const onButtonClick=()=>{
         
            inputEl.current.value="Hello ,useRef"
            console.log(inputEl)
        }
        const [text, setText] = useState('willem')
        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 Example10

![在这里插入图片描述][af39938b0ed446deb18303f6b91d8876.gif_pic_center]  
这时想每次text发生状态改变，保存到一个变量中或者说是useRef中，这时候就可以使用useRef了。

先声明一个textRef变量，他其实就是useRef函数。

然后使用useEffect函数实现每次状态变化都进行变量修改，并打印。最后的全部代码如下。

![在这里插入图片描述][0cbe0c0bbaae412489599408886c5cfb.gif_pic_center]

这时候就可以实现每次状态修改，同时保存到useRef中了，也就是我们说的保存变量的功能。那useRef的主要功能就是获得DOM和变量保存，到这儿，相信你的编码能力又增加了一些，加油吧！

[567662c0438b4d97ba6ff3d27cb5751c.gif_pic_center]: https://img-blog.csdnimg.cn/567662c0438b4d97ba6ff3d27cb5751c.gif#pic_center
[af39938b0ed446deb18303f6b91d8876.gif_pic_center]: https://img-blog.csdnimg.cn/af39938b0ed446deb18303f6b91d8876.gif#pic_center
[0cbe0c0bbaae412489599408886c5cfb.gif_pic_center]: https://img-blog.csdnimg.cn/0cbe0c0bbaae412489599408886c5cfb.gif#pic_center