React ref回调函数例子
ref属性也可以是一个回调函数而不是一个名字。 这个函数将要在组件被挂载之后立即执行。
这个参照的组件将会作为该函数的参数，这个函数可以立即使用这个组件参数，当然也可以将其保存供以后使用。
当这个参照组件被卸载并且这个ref改变的时候，先前的ref的参数值将为null。这将有效的防止了内存的泄露。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="#root">
</div>
</body>
<script type="text/babel">
window.onload = function(){
class Main extends React.Component{
constructor(){
super();
this.textChange = this.textChange.bind(this);
this.clearText = this.clearText.bind(this);
this.state = {"con":"你好"}
}
textChange(e){
this.setState({
"con":e.target.value
})
}
clearText(e){
this.setState({
"con":""
})
}
render(){
return(<div>
<input type="text" value={this.state.con} onChange={this.textChange} ref={function(input){ alert(input);if(input!=null){input.focus()}}} />
<input type="button" value="清空并获得焦点" onClick={this.clearText} />
<input type="text" />
</div>)
}
}
ReactDOM.render(<Main/>,document.getElementById('#root'))
}
</script>
</html>
return(<div>
<input type="text" value={this.state.con} onChange={this.textChange} ref={function(input){ alert(input);if(input!=null){input.focus()}}} />
<input type="button" value="清空并获得焦点" onClick={this.clearText} />
<input type="text" />
</div>)
第一次打开页面时会弹出[object HTMLInputElement];
这个函数将要在组件被挂载之后立即执行。
当点击按钮时则会弹出两个对话框
一个为 null
另一个为[object HTMLInputElement]
为什么弹出两次呢？
第一次因为ref回调函数会在ref改变时触发,且ref参数的值为null，所以弹出null
第二次因为调用clearText函数改变state会重新渲染改变的组件，所以再次弹出[object HTMLInputElement]
React ref回调函数例子的更多相关文章
- c# 异步编程 使用回调函数例子
环境VS2010, 在项目属性中输出类型选择控制台应用程序 运行结果 using System;using System.Collections.Generic;using System.Compon ...
- 一个简单的jQuery回调函数例子
jQuery回调函数简单使用 比如说,我们想要点击某个按钮后触发事件, 先把一些指定内容给隐藏掉, 然后跳出相关信息的对话框. 如果使用普通的方法, 不用回调函数的话, 会有怎么样的效果呢? 效果是先 ...
- Java 回调函数例子
首先定义一个类Caller,按照上面的定义就是程序员A写的程序a,这个类里面保存一个接口引用. public class Caller { private MyCallInterface callIn ...
- C/C++ 不带参数的回调函数 与 带参数的回调函数 函数指针数组 例子
先来不带参数的回调函数例子 #include <iostream> #include <windows.h> void printFunc() { std::cout<& ...
- React Ref 其实是这样的
大家好,我是Mokou,好久没有冒泡了,最近一直在看研究算法和数据结构方面的东西,但是似乎很多前端不喜欢看这种东西,而且目前本人算法方面也很挫,就不献丑了. 当然了,最近也开始研究React了,这篇文 ...
- 关于js的callback回调函数的理解
回调函数的处理逻辑理解:所谓的回调函数处理逻辑,其实就是先将回调函数的代码 冻结(或者理解为闲置),接着将这个回调函数的代码放到回调函数管理器的队列里面. 待回调函数被触发调用的时候,对应的回调函数的 ...
- javascript 回调函数应用
回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考. 回调函数原理: 我现在出发,到了通知你”这是一个异步 ...
- 前端基本知识（四）：JS的异步模式：1、回调函数；2、事件监听；3、观察者模式；4、promise对象
JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列 ...
- 对于Python中回调函数的理解
关于回调函数,网上有很多说明和各种解释,多数在尝试用语言描述.我认为,如果对各个角色之间的关系不清楚,如果没有相关的编程需求,那么语言便非常无力,很难理解. 这是360百科的解释: 在计算机程序设计中 ...
随机推荐
- 微信小程序个人心得
尊重原创:http://blog.csdn.net/qq_28832135/article/details/52796048 昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得. 首先从官方文 ...
- echarts自定义提示框数据
tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "line" // 默认为 ...
- JXLS 2.4.0系列教程（五）——更进一步的应用和页面边距bug修复
注:本文代码建立于前面写的代码.不过不看也不要紧. 前面的文章把JXLS 2.4.0 的基本使用写了一遍,现在讲讲一些更进一步的使用方法.我只写一些我用到过的方法,更多的高级使用方法请参考官网. ht ...
- Kubernetes volumes简介
容器中的磁盘文件生命周期比较短暂,在一些比较复杂的容器应用中会产生一些问题.一.容器crash后,kubelet会重启该容器,但这些文件会丢失掉.二.pod中的多个容器经常需要共享文件.因此,Kube ...
- Django App(三) View+Template
接着上一节(二)的内容,首先启动站点,通过界面添加Question和Choice两张表的数据,因为接下来,要向polls app里面添加views. 1.添加数据如下(这里是通过界面操作添加的数据) ...
- PHP UEditor富文本编辑器 显示 后端配置项没有正常加载，上传插件不能正常使用
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 问题描述 我的编辑器在本地测试的时候没问 ...
- linux下卸载apache方法小结
方法一 代码如下: 1. root@server ~]# rpm -qa|grep httpd httpd-2.2.3-11.el5_2.centos.4 httpd-manual-2.2.3-1 ...
- 邓_laravel框架——news
----------------------------------------------------------------------------------- [laravel框架] 路由+中 ...
- 分享整理的免费API接口
天气接口 聚合数据: http://op.juhe.cn/onebox/weather/query 用例 官方文档 来源:weather.com 百度接口: http://api.map.baidu. ...
- java学习总结之文件操作--ByteArrayOutputStream的用法
ByteArrayOutputStream类是在创建它的实例时,程序内部创建一个byte型别数组的缓冲区, 然后利用ByteArrayOutputStream和ByteArrayInputStream ...