React Hooks学习之旅六：useRef获取DOM元素和保存变量

useRef可以获取DOM元素和保存普通变量。

获取DOM元素

新建Example8.js，通过useRef获取input框DOM元素：

import React, { useRef } from 'react';

function Example8(){
    const inputEl = useRef(null);//获取input DOM元素
    
    const onBtnClick = ()=>{
        inputEl.current.value = "Hello World";
        console.log(inputEl);
    }

    return (
        <>
            <input ref={inputEl} type="text"/>
            <button onClick={onBtnClick}>在input上展示文字</button>
        </>
    )
}

export default Example8;

效果如下：

保存变量

在Example8.js中添加一个input框来实现useRef保存普通变量的效果：

import React, { useEffect, useRef, useState } from 'react';

function Example8(){
    const inputEl = useRef(null);//获取input DOM元素
    
    const onBtnClick = ()=>{
        inputEl.current.value = "Hello World";
        console.log(inputEl);
    }

    /**useRef保存text的值 */
    const [text,setText] = useState('WORLD');
    const textRef = useRef();
    useEffect(()=>{
        textRef.current = text;
        console.log('textRef:current:',textRef.current);
    })

    return (
        <>
            <input ref={inputEl} type="text"/>
            <button onClick={onBtnClick}>在input上展示文字</button>
            <br/>
            <br/>
            <input value={text} onChange={(e)=>{setText(e.target.value)}}/>
        </>
    )
}

export default Example8;

实现效果：

可以看到textRef的值随着input框中的值变化而变化。