react中ref使用方法解析

文章目录

什么是ref
- string类型
- createRef创建
- - 写法一：
  - 写法二：

什么是ref

组件不是真实的DOM节点,在react开发中,官方也不建议直接去操作原生的DOM。组件的DOM节点是存在于内存中的一种数据结构,叫做虚拟DOM。如果需要从组件中获取真实的DOM节点,那就需要官方提供ref的属性。React提供了ref用于访问在render方法中创建的DOM元素或者是React的组件实例。
ref分为三种，我们这里先学两种。

string类型

看下面的小例子：点击按钮能够把输入框的值赋值给下面的p标签

import React, { Component } from 'react'export class App extends Component {render() {return (<div><input type='text' ref="haha" /><button onClick={this.getText}>点击</button><p ref="user">user</p></div>)}getText = () => {console.log(this.refs.haha.value)const user = this.refs.haha.valuethis.refs.user.innerHTML = user}
}export default App

这里我们就是通过ref来获取dom结点进行操作，input输入数据之后打印this.refs：
可以看到输入框的数据即为this.refs.haha.value

不过这种string类型的方法以及淘汰掉了，来看下一种

createRef创建

首先在页面最上面要进行导入，这里也导入一下PureComponent，因为下面例子会用到

import React, { createRef, PureComponent } from 'react'

写法一：

1.直接在constructor中定义this.headerRefs = createRef()
2.然后在需要使用的组件上绑定ref：

3.在按钮的点击时间中通过current属性去获取DOM节点或者组件是实例，这里打印出来了

export class App extends PureComponent {constructor() {super()this.headerRefs = createRef()}render() {return (<div>App Page<Header ref={this.headerRefs}/><button onClick={this.getText}>点击获取</button></div>)}getText = () => {// 通过current属性去获取DOM节点或者组件是实例console.log(this.headerRefs.current.state.name)}
}class Header extends PureComponent {state = {name: 'hello react'}render() {return (<div>header Component</div>)}
}export default App

功能是实现了，但是在constructor中进行实现多少有点麻烦，下面介绍另一个写法：

写法二：

将input的内容展示给p标签
1.直接使用headerRefs = createRef()的格式去创建ref
2.在需要使用的组件上进行绑定< Header ref={this.headerRefs}/>
3.使用this.userRefs.current.innerHTML = this.inputRefs.current.value完成需求

export class App extends PureComponent {headerRefs = createRef()inputRefs = createRef()userRefs = createRef()render() {return (<div>App Page<Header ref={this.headerRefs}/><input type='text' ref={this.inputRefs} /><p ref={this.userRefs}>user</p><button onClick={this.getText}>点击获取</button></div>)}getText = () => {console.log(this.headerRefs.current.state.name)console.log(this.inputRefs)console.log(this.userRefs)this.userRefs.current.innerHTML = this.inputRefs.current.value}
}class Header extends PureComponent {state = {name: 'hello react'}render() {return (<div>header Component</div>)}
}export default App

查看效果：