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百科的解释: 在计算机程序设计中 ...
随机推荐
- [国嵌笔记][006][Linux文本编辑器]
Linux中常见的文本编辑器有Vi和Emacs Vim有3中工作模式:命令行模式.插入模式.底行模式 1.键入i进入插入模式 2.键入[Esc]退回到命令行模式 3.键入:进入底行模式,再键入wq保存 ...
- .24-浅析webpack源码之事件流compilation(2)
下一个compilation来源于以下代码: compiler.apply(new EntryOptionPlugin()); compiler.applyPluginsBailResult(&quo ...
- 久未更 ~ 四之 —— Vsftpd出现 Failed to start Vsftpd ftp daemon错误
> > > > > 久未更 系列一:Failed to start Vsftpd ftp daemon错误 配置 vsftpd.conf文件后 重启ftp服务 出现 Fa ...
- KEIL MDK 查看代码量、RAM使用情况--RO-data、RW-data、ZI-data
KEIL RVMDK编译后的信息 Code是代码占用的空间, RO-data是 Read Only 只读常量的大小,如const型, RW-data是(Read Write) 初始化了的可读写变量的大 ...
- css background之设置图片为背景技巧
css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...
- 003_JS基础_面向对象基础
3.1 对象 引入:在js中表示一个人的信息(name, gender, age)通过var申明三个变量,但是这样使用基本数据类型的变量,他们是互相独立的,没有联系: 此时就需要使用对象,对象是 ...
- MySQL的char和varchar针对空格的处理
MySQL的char和varchar存储和查询中包含空格的实验 MySQL版本 一.测试char包含空格的存储和查询 测试发现,存储的数据,char数据类型的右侧空格存储的时候被删除了,但是左侧空格还 ...
- _3_form_标签
什么是input标签? 处理输入信息 input有哪些类型? 选择: <input type="checkbox"> 多选框,选择爱好等 <input type= ...
- AMS的适用场景
AMS适用于网络音视频应用的各种场合,可以独立作为直播点播平台应用,也可以嵌入到用户的各种应用平台中,为客户提供音视频核心支撑,不同于其它提供云服务租给客户使用的产品,AMS是一套安装在企业内部服务器 ...
- Java并发编程的艺术读书笔记(1)-并发编程的挑战
title: Java并发编程的艺术读书笔记(1)-并发编程的挑战 date: 2017-05-03 23:28:45 tags: ['多线程','并发'] categories: 读书笔记 --- ...