React中ref的使用-蒲公英云

React中ref的使用

一、类式组件使用Ref

1、字符串 Refs

官方目前不推荐使用这种方式创建Ref，因为这种方式存在一些问题，影响效率，可能会在后续版本移除

step

1、在要获取的DOM上，加上ref='xxx'

2、获取的时候通过this.refs.xxx获取当前DOM实例

import React, { Component, Fragment } from ‘react’;

class App extends Component {

getName = () => { 
    //注意：是refs不是$refs
    console.log(this.refs.nameRef)
}
render() { 
    return (
        <Fragment>
            //使用ref属性，在要获取的DOM身上定义
            <input ref="nameRef" type="text" placeholder="请输入姓名"></input>
            <button onClick={ this.getName}>获取姓名</button>
        </Fragment>
    );
}

}

export default App;

2、回调 Refs

2.1 内联函数绑定方式

注意：该方式在更新过程中ref绑定的函数它会被执行两次，第一次传入参数是null，第二次才会传入参数 DOM 元素，但是大多数情况下，它是无关紧要的

在需要获取的DOM设置设置ref属性，值是一个函数，<input ref={ele => this.xxx = ele} />，接收的参数就是当前绑定ref属性的DOM

import React, {  Component, Fragment } from 'react';
class App extends Component { 
    inputRef = null
    getName = () => { 
        //获取姓名
        console.log(this.inputRef.value)
    }
    updateData = () => { 
        this.setState({ })
    }
    render() { 
        return (
            <Fragment>
                <input 
                    ref={ 
                        element => { 
                                this.inputRef = element; 
                                //在更新过程中它会被执行两次，第一次传入参数 null，
                                //然后第二次会传入参数 DOM 元素
                                console.log(this.element)
                            }
                        } 
                type="text" 
                placeholder="请输入姓名"></input>
                <button onClick={ this.getName}>获取姓名</button>
                <button onClick={ this.updateData}>更新数据</button>
            </Fragment>
        );
    }
}
export default App;

2.2 class绑定函数的方式

将 ref 的回调函数定义成 class 的绑定函数的方式可以避免数据更新执行两次

import React, {  Component, Fragment } from 'react';
class App extends Component { 
    inputRef = null
    getName = () => { 
        console.log(this.inputRef.value)
    }
    updateData = () => { 
        this.setState({ })
    }
    setInputRef = ele => { 
        this.inputRef = ele
        console.log(ele)
    }
    render() { 
        return (
            <Fragment>
                //注意：这里将回调函数定义在外面
                <input ref={ this.setInputRef} type="text" placeholder="请输入姓名"/>
                <button onClick={ this.getName}>获取姓名</button>
                <button onClick={ this.updateData}>更新数据</button>
            </Fragment>
        );
    }
}
export default App;

3、创建 Refs

注意: 该方式只能在React 16.3 版本及之后的版本中使用

通过React.createRef()创建Ref容器，通过ref绑定当前容器，让当前容器承载当前ref的节点信息
可通过ref容器的current属性获取到当前节点。

如果创建出的Ref容器，被多个DOM绑定，前面绑定的DOM会被后面的绑定的DOM替换，因为React.createRef()创建出来的容器是专人专用、专一的”人”，只能承载一个DOM节点信息。

import React, {  Component, Fragment } from 'react';
class App extends Component { 
    //创建Ref容器，承载当前ref绑定的节点信息
    inputRef = React.createRef()
    getName = () => { 
        console.log(this.inputRef.current.value)
    }
    updateData = () => { 
        this.setState({ })
    }
    render() { 
        return (
            <Fragment>
                //绑定ref，让inputRef容器承载当前节点信息
                <input ref={ this.inputRef} type="text" placeholder="请输入姓名" />
                <button onClick={ this.getName}>获取姓名</button>
            </Fragment>
        );
    }
}
export default App;

二、函数式组件使用Ref

和类式组件中创建Refs 相似，把React.createRef()换成了React.useRef()，其它与类式组件创建Refs一致

import React, {  Fragment } from 'react';
const App = () => { 
    const inputRef = React.useRef()
    function getName() { 
        console.log(inputRef.current.value)
    }
    return (
        <Fragment>
            <input ref={ inputRef} type="text" placeholder="请输入姓名"></input>
            <button onClick={ getName}>获取姓名</button>
        </Fragment>
    );
}
export default App