react中ref使用方法解析

文章目录

- 什么是ref

什么是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

查看效果：
在这里插入图片描述