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'