react refs

Refs （16.9.0）

Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素。

使用场景

管理焦点，文本选择或媒体播放。例如：新页面打开可以通过refs去显示的将鼠标聚焦于input输入框。
触发强制动画。这种方式还没有遇到过。
集成第三方DOM库。例如富文本编辑框，需要通过ref方式获取到富文本编辑框的文本内容。
 

普通使用

创建Refs

this.myRef = React.createRef();

绑定Refs

<Child ref={this.myRef} />

访问Refs

this.myRef.current

Refs转发

官方给的方式就不写，这里就写一下官方没写的class组件的方式

import React from 'react';

// css & img

// 公共组件 & 方法

// 业务组件

// service & 枚举数据

class Child extends React.Component {

  /* -------------------------------------------- 生命周期函数 -------------------------------------------- */


  /* -------------------------------------------- 数据处理方法 -------------------------------------------- */


  /* -------------------------------------------- 纯函数组件 ------------------------------------------------- */


  /* -------------------------------------------- 页面操作方法 -------------------------------------------- */


  /* -------------------------------------------- Popover内容相关代码 ------------------------------------- */


  /* -------------------------------------------- 渲染函数 ------------------------------------------------  */

  render() {
    console.log('子组件render');
    debugger
    return <input type="text" placeholder="Hello World" ref={this.props.innerRef} />
  }
}

export default React.forwardRef((props, ref) => <Child 
  innerRef={ref} {...props}
/>);

 

回调Refs

    this.myRef = element => {
      this.textInput = element;
    };

this.textInput