ref在react中是一个对象,它有一个current属性,可以对这个属性进行操作,用于获取DOM元素和保存变化的值。常用的案例是input标签来展示和实践。推荐方法:在函数式组件中调用useRef()函数和在类组件中调用createRef()函数,它们返回ref对象。在组件的整个生命周期中,ref对象一直存在:组件挂载,ref对象创建,组件销毁,ref对象销毁。
一、使用场景
1、点击按钮让输入框聚焦
2、动画效果,例如移动,变大变小
二、案例体验
(一)在类组件中使用ref
1、使用字符串的方式【已经弃用】
(1)给 标签 / 组件 设置 ref="标签名"
(2)通过 this.refs.标签名 访问,ref可以获取到应用的 真实dom / 组件对象
this.refs.iptRef 获取标签
this.refs.iptRef.value 获取标签单前值
import React, { Component } from 'react'
export default class App3 extends Component {
render() {
return (
<div>
{/*
已经弃用 :
1、给 标签 / 组件 设置 ref="标签名"
2、通过 this.refs.标签名 访问,ref可以获取到应用的 真实dom / 组件对象
*/}
<input ref="iptRef"/>
<button onClick={()=>{console.log(this.refs.iptRef.value);}}>add</button>
</div>
)
}
}
2、使用createRef方法【推荐使用】
(1)全局定义一个变量 myRef = React.createRef()
(2)在标签中通过ref={this.myRef}绑定
(3)访问 this.myRef.current
this.refs.current 获取标签
this.refs.current.value 获取标签单前值
import React, { Component } from 'react'
export default class App3 extends Component {
// 1、全局定义一个变量 myRef = React.createRef()
myRef = React.createRef()
render() {
return (
<div>
{/*
新的写法:
1、全局定义一个变量 myRef = React.createRef()
2、在标签中通过ref={this.myRef}绑定
3、访问 this.myRef.current
*/}
<input ref={this.myRef} />
<button onClick={()=>{
console.log(this.myRef.current.value);
}}>add</button>
</div>
)
}
}
3、注意
当ref与setState合用的时候,会出现一些坑,DOM的获取并不及时,原因是setState是异步的,如果需要在数据变化(页面更新)之后获取DOM,我们要把获取DOM的语法,放在setState的第二个参数里,setState的第二个参数是一个函数,我们可以把获取DOM的逻辑放在里边。setState的第二个参数会在setState异步执行完毕之后执行。这样就能保证,当第二个参数执行的时候,页面已经被更新完了。
(二)在函数式组件中使用ref
1、使用useRef()方法【推荐使用】
(1)通过useRef()函数定义一个变量,可以给一个初始值
(2)通过ref绑定标签
(3)通过myRef.current访问
myRef.current 获取标签
myRef.current.value 获取标签单前值
import React ,{useRef}from 'react'
export default function App4() {
// 1、通过useRef()函数定义一个变量,可以给一个初始值
const myRef = useRef()
return (
<div>
{
/*
函数式组件:
1、通过useRef()函数定义一个变量,可以给一个初始值
2、通过ref绑定标签
3、通过myRef.current访问
*/
}
<input ref={myRef} />
<button onClick={()=>{
console.log(myRef.current.value);
}}>add</button>
</div>
)
}
实际上,能不操作dom就不要操作dom,但是有时候实际开发中会遇到一些比较复杂的场景,必须使用的时候才使用,比如动画。