react中ref的两种使用方法

最新推荐文章于 2025-07-06 16:16:05 发布

前端kit

最新推荐文章于 2025-07-06 16:16:05 发布

阅读量6.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_20069429/article/details/81750070

本文详细介绍了React中ref的两种使用方式：回调函数形式和字符串形式，并通过具体实例展示了如何在组件中使用ref来获取DOM元素。文章还解释了回调函数形式下ref的三种触发方式，帮助开发者更好地理解和应用React的ref机制。

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

ref一共有两种使用方式

回调函数形式（官方推荐）
string形式

第一种回调函数形式

回调函数形式一共有三种触发方式

组件渲染后
组件卸载后
ref改变后

import React,{Component} from 'react'
export default class UserAdd extends Component{
    constructor(){
        super();
    }
    handleSubmit=()=>{
        let name=this.name.value;
        console.log(name);
    }
    render(){
        return(
            <form onSubmit={this.handleSubmit}>
                <div className="from-group">
                    <label htmlFor="name">姓名</label>
                    <input type="text" className="form-control" ref={ref=>this.name=ref}/>
                </div>
                <div className="from-group">
                    <input type="submit" className="btn btn-primary"/>
                </div>
            </form>
        )
    }

}

第二种字符串的形式使用时用this.refs.string

import React,{Component} from 'react'
export default class UserAdd extends Component{
    constructor(){
        super();
    }
    handleSubmit=()=>{
        let name=this.refs.name.value;
        console.log(name);
    }
    render(){
        return(
            <form onSubmit={this.handleSubmit}>
                <div className="from-group">
                    <label htmlFor="name">姓名</label>
                    <input type="text" className="form-control" ref="name"/>
                </div>
                <div className="from-group">
                    <input type="submit" className="btn btn-primary"/>
                </div>
            </form>
        )
    }

}