什么是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.value
this.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查看效果：
