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