React Hooks之useRef

最新推荐文章于 2025-06-22 20:32:24 发布

淡颜Amo~

最新推荐文章于 2025-06-22 20:32:24 发布

阅读量644

点赞数

CC 4.0 BY-SA版权

文章标签： react.js 前端

本文链接：https://blog.youkuaiyun.com/qq_44718039/article/details/125293942

本文介绍了如何在React中利用useRef Hook获取DOM节点，并通过示例展示了如何实现输入框自动聚焦的功能。通过三步简单操作：初始化引用、绑定DOM节点和在useEffect中应用业务逻辑，即可实现在组件加载后自动聚焦输入框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

useRef可以用来拿到dom节点的引用，拿到引用后可以进行一系列操作

步骤：

①创建初始化引用 const newRef=React.createRef ( )

②以属性的方式绑定到dom节点上 eg. <input ref = {newRef} />

③进行一系列业务逻辑

一般等组件挂载完成，拿到引用后再进行业务逻辑

所以一般在useEffect钩子函数里完成业务逻辑

实例：给input表单自动聚焦（原本是点上去才会聚焦）

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

function Input() {

    //  1. 初始化Ref
    const inputRef = useRef()

    useEffect(() => {
        
        //  3. 使用input表单的引用inputRef实现自动聚焦业务
        inputRef.current.focus()
        
    }, [])

    //  2. 以属性方式给Ref赋值
    return <input ref={inputRef} />
}

export default function RefDemo() {
    return (
        <div>
            <Input />
        </div>
    )

}