React中ref的使用

ゝ一世哀愁。 2022-11-15 11:29 205阅读 0赞

### 一、类式组件使用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

以上就是React三大重要属性之一Ref的使用