React中ref的使用

// oneOfType 多选一,接收一个数组。

可以用e.target获取一个DOM元素。

也可以用ref来获取DOM元素。

ref={ (input) => {this.input = input} }

this.input 指向的是=右边的input ->参数 (input) ->input DOM元素。

e.targe可以用this.input去代替。

不建议使用ref.

例如获取ul的长度:

ul有一个元素时,但是长度确是0.  因为setState方法是一个异步函数,有的时候不会立即去执行。

将代码放到setState的第二个参数回调函数中执行就不会出错了。

0

原文地址:https://www.cnblogs.com/c-x-m/p/10453554.html

时间: 2024-08-30 17:42:12

React中ref的使用的相关文章

React中ref的使用方法

React中ref的使用方法 在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像react官网所描述的一样,在react典型的数据量之外,某些情况下(例如和第三方的dom库整合,或者某个dom元素focus等)为了修改子组件我们可能需要另一种方式,这就是ref方式. 1.ref有两种使用方法: 1)回调函数 标签中:<input type="text" classNam

react中的ref的3种方式

2020-03-31 react中ref的3种绑定方式 方式1: string类型绑定 类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获取到节点dom 注意的是 这种方式已经不被最新版的react推荐使用,有可能会在未来版本中遗弃 方式2: react.CreateRef() 通过在class中使用React.createRef()方法创建一些变量,可以将这些变量绑定到标签的ref中 那么该变量的current则指向绑定的标签dom 方式3: 函数形式 在clas

react 使用 ref 报错 ,[eslint] Using string literals in ref attributes is deprecated. (react/no-string-refs)

react 项目中给指定元素加事件,使用到 react 的 ref 属性,Eslink 报错 [eslint] Using string literals in ref attributes is deprecated. (react/no-string-refs) 常用方法:(会报错) var Hello = createReactClass({ componentDidMount: function() { var component = this.refs.hello; // ...do

react中input自动聚焦问题

input自动聚焦问题 在react中可以使用refs解决这个问题,首先看一下refs的使用场景: (1)处理焦点.文本选择或媒体控制. (2)触发强制动画. (3)集成第三方 DOM 库. 使用refs解决input聚焦的问题有两种应用场景: 1.组件内部: 在input内部定义ref,当给 HTML 元素添加 ref 属性时,ref 回调接收了底层的 DOM 元素作为参数.例如,下面的代码使用 ref 回调来存储 DOM 节点的引用. class CustomTextInput extend

关于在react中引用百度地图

按照以下三个步骤即可: 1.首先要去百度地图上申请密钥. 2.在react中引入百度地图相关script <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=自己的密钥" ></script> 3.为了防止之后报错BMap is not defined,我这里采用的是引用echarts,在echarts里绘制百度地图的方法. 我用的版本是

【React自制全家桶】三、React使用ref操作DOM与setState遇到的问题

在React中同时使用ref操作DOM与setState常常会遇到 比如操作的DOM是setState更新之前的DOM内容,与想要的操作不一致.导致这样的原因是setState函数是异步函数. 就是当ref的操作执行结束后,可能setState函数才执行. 解决方案: 将有关ref操作的放在setState函数的回调函数里.代码示例: handleBtnClick(){ //不能用this,因为此时this指向它绑定的按钮,并且不能直接用这个this.state,永远不要直接修改this.sta

react中使用canvas播放视频

最近做个移动端视频需求,要求隐藏播放控件,并且可以自动播放而且隐藏播放控件(不太人性化),最后要有个定制的结束遮罩层用来人机交互.尝试直接用video标签做,但是各种坑啊,video永远是在页面的最顶层,所以播放控件的自定义化就凉凉了,怎么办呢?受以前做的一个利用canvas做视频直播的项目启发,尝试下canvas做视频播放,于是我抱着试一试的心态去查阅了相关资料,尼玛,还真的可以,而且原理很简单! 首先要解决在react中操作canvas的问题,众所周知,react和vue都是生成的虚拟dom

react 中的blur事件

我们知道,想要手动触发blur事件时候,可以使用:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur Element.blur() 然而在react中,当你想手动触发一个input的blur事件时,你会得到一个错误:blur is not a function 在react中,当我们要操纵dom时候,我们一般会使用ref,比如focus事件: this.ref.current.focus() // 这个会运行的很好

React 中阻止事件冒泡的问题

在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡. IE9 及之前的版本只支持冒泡 | A -----------------|--|----------------- | Parent | | | | -------------|--|----------- | | |Children V | | | | --