React ref属性
时间:2020-04-12
本文章向大家介绍React ref属性,主要包括React ref属性使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
简单来说,ref就是用来获取真实dom元素或者是组件实例的属性。
1. 创建和访问
ref 的值根据节点的类型而有所不同:
- 当
ref
属性用于 HTML 元素时,构造函数中使用React.createRef()
创建的ref
接收底层 DOM 元素作为其current
属性。 - 当
ref
属性用于自定义 class 组件时,ref
对象接收组件的挂载实例作为其current
属性。 - 不能在函数组件上使用
ref
属性,因为他们没有实例。若是想用需要经过特殊处理
1.1 ref=字符串 (已经废弃)
class Cualculator extends React.Component {
add =() => {
let num1 = parseInt(this.refs.num1.value)
let num2 = parseInt(this.refs.num2.value)
let result = num1 +num2
this.refs.result.value = result
}
render() {
return (
<div>
<input ref="num1" />+<input ref="num2"/><button onClick={this.add}>=</button><input ref="result"/>
</div>
)
}
}
* num1:对应真实dom num1
* num2:对应真实dom num2
1.2 ref=函数 (不推荐)
class Cualculator extends React.Component {
add =() => {
let num1 = parseInt(this.num1.value)
let num2 = parseInt(this.num2.value)
let result = num1 +num2
this.result.value = result
}
//ref值是一个函数的时候,此函数会在虚拟dom转为真实dom插入也买你之后执行,参数就是真实dom
render() {
return (
<div>
<input ref={instance => this.num1 = instance} />+<input ref={instance => this.num2 = instance}/><button onClick={this.add}>=</button><input ref={instance => this.result = instance}/>
</div>
)
}
}
1.3 ref = React.createRef() (推荐使用)
通过React.createRef() 创建的ref属性有以下几个特点:
当 ref 被传递给 render
中的元素时,对该节点的引用可以在 ref 的 current
属性中被访问。
- 当
ref
属性用于 HTML 元素时,构造函数中使用React.createRef()
创建的ref
接收底层 DOM 元素作为其current
属性。 - 当
ref
属性用于自定义 class 组件时,ref
对象接收组件的挂载实例作为其current
属性。 - 不能在函数组件上使用
ref
属性,因为他们没有实例。若是想用需要经过特殊处理
1.3.1 Html元素
class Cualculator extends React.Component {
constructor(){
super()
this.num1 = React.createRef() //{current:null} current在虚拟dom转为真实dom插入页面之后变成真实dom
this.num2 = React.createRef() //{current:null} current在虚拟dom转为真实dom插入页面之后变成真实dom
this.result = React.createRef() //{current:null} current在虚拟dom转为真实dom插入页面之后变成真实dom
}
add =() => {
let num1 = parseInt(this.num1.current.value)
let num2 = parseInt(this.num2.current.value)
let result = num1 +num2
this.result.current.value = result
}
//ref值是一个函数的时候,此函数会在虚拟dom转为真实dom插入页面之后执行,参数就是真实dom
render() {
return (
<div>
<input ref={this.num1} />+<input ref={this.num2}/>
<button onClick={this.add}>=</button>
<input ref={this.result}/>
</div>
)
}
}
ReactDOM.render(<Cualculator></Cualculator>,document.getElementById('root'))
dom元素作为current属性的值
1.3.2 class组件
class UserName extends React.Component{
constructor(){
super()
this.inputRef = React.createRef()
}
render(){
return (
<input ref={this.inputRef}></input>
)
}
}
class Form extends React.Component{
constructor(){
super()
this.username = React.createRef() //this.username 就是UserName组件的实例 this.username.current = new UserName()
}
getFocus = () => {
this.username.current.inputRef.current.focus() //this.username.current.inputRef.current 获取到组件对应的真实dom节点 就是 input框
}
render(){
return (
<form>
<UserName ref={this.username}/>
<button type="button" onClick={this.getFocus}>让用户名获得焦点</button>
</form>
)
}
}
组件的实例等于current属性的值
1.3.3 函数组件
ref React.createRef()会获取到一个真实dom或者是一个组件实例对象 但是函数组件没有实例,那怎么获取函数组件的ref属性,这个时候就需要特殊处理
function UserName(props,ref) {
return <input ref={ref}></input>
}
const ForwordUsername = React.forwardRef(UserName)
class Form extends React.Component{
constructor(){
super()
this.username = React.createRef() //this.username 就是ForwordUsername组件的实例 this.username.current = new ForwordUsername()
}
getFocus = () => {
this.username.current.focus() //this.username.current.inputRef.current 获取到组件对应的真实dom节点 就是 input框
}
render(){
return (
<form>
<ForwordUsername ref={this.username}/>
<button type="button" onClick={this.getFocus}>让用户名获得焦点</button>
</form>
)
}
}
React.forwardRef会穿透UserName组件,获取到input的真实dom元素。
1.4 React.forwardRef()的底层实现
function UserName(props,ref) {
return <input ref={ref}></input>
}
function forwardRef (functionComponent) {
return class extends React.Component {
render() {
return functionComponent(this.props,this.props.ref2)
}
}
}
const ForwordUsername = forwardRef(UserName) //React.forwardRef返回一个类组件,将这个类组件传给
class Form extends React.Component{
constructor(){
super()
this.username = React.createRef() //this.username 就是UserName组件的实例 this.username.current = new UserName()
}
getFocus = () => {
this.username.current.focus() //this.username.current.inputRef.current 获取到组件对应的真实dom节点 就是 input框
}
render(){
return (
<form>
<ForwordUsername ref2={this.username}/>
<button type="button" onClick={this.getFocus}>让用户名获得焦点</button>
</form>
)
}
}
它是将函数组件转换成了类组件,当然也可以直接返回一个转化之后的函数组件
function UserName(props) {
return <input ref={props.ref2}></input>
}
//函数组件没有this,可以通过
function forwardRef (functionComponent) {
return props => functionComponent(props,props.ref2)
}
const ForwordUsername = forwardRef(UserName) //React.forwardRef返回一个类组件,将这个类组件传给
class Form extends React.Component{
constructor(){
super()
this.username = React.createRef() //this.username 就是UserName组件的实例 this.username.current = new UserName()
}
getFocus = () => {
this.username.current.focus() //this.username.current.inputRef.current 获取到组件对应的真实dom节点 就是 input框
}
render(){
return (
<form>
<ForwordUsername ref2={this.username}/>
<button type="button" onClick={this.getFocus}>让用户名获得焦点</button>
</form>
)
}
}
ReactDOM.render(<Form></Form>,document.getElementById('root'))
1.5 Refs 使用场景
- 处理焦点、文本选择或者媒体的控制
- 触发必要的动画
- 集成第三方 DOM 库
原文地址:https://www.cnblogs.com/lyt0207/p/12684036.html
- 10g升级至11g exp的问题解决(23天)
- redo日志文件学习(22天)
- 数据库文件的迁移
- excel文件内容导入数据库的问题及解决(20天)
- 10g,11g数据泵的导入问题及解决(19天)
- ORACLE 11g导入9i dump的问题及解决
- 服务器增加内存后无法重启数据库的问题及解决 (36天)
- 分区表放入keep pool,recycle pool的问题及解析(34天)
- 临时表空间故障处理 (33天)
- 关于物化视图疑问(32天)
- ORACLE 10g 升级 11g问题汇总(31天)
- 数据库11g升级中一次奇怪的问题 (30天)
- 10g升级至11g需要考虑的参数优化(29天)
- 关于oracle invalid components问题的解决(28天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python-利用python写一个购物小程序
- Java技巧收录一 那些你相见恨晚的快捷键和代码注释模板
- Educational Codeforces Round 81 (Rated for Div. 2) C.Obtain The String
- 深入了解 webpack 模块加载原理
- Java中的数字类解析(包括格式化数字、大数运算等等)
- 数据挖掘领域十大经典算法之—K-邻近算法/kNN(超详细附代码)
- 洛谷 P1019 单词接龙
- SpringBoot 将自制的Starter 发布到远程公服
- 【分享】优化rootfs的大小
- PAT (Advanced Level) Practice 1099 Build A Binary Search Tree (30 分)
- 前端国际化辅助工具——自动替换中文并翻译
- Codeforces Round #613 (Div. 2)A. Mezo Playing Zoma
- PAT (Advanced Level) Practice 1096 Consecutive Factors (20 分)
- Codeforces Round #613 (Div. 2)B. Just Eat It!
- java线程池(六):ForkJoinPool源码分析之二(WorkQueue源码)