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百科的解释: 在计算机程序设计中 ...
随机推荐
- JAVA获取客户端IP地址和MAC地址
1.获取客户端IP地址 public String getIp(HttpServletRequest request) throws Exception { String ip = request.g ...
- Entity Framework Core 懒加载
众所周知在EF 6 及以前的版本中,是支持懒加载(Lazy Loading)的,可惜在EF Core 并不支持,必须使用Include方法来支持导航属性的数据加载.不过现在EF Core的开发团队打算 ...
- js闭包的真正理解
<高级程序设计>上,这样说:当在函数内部定义了其他函数时候,就创建了闭包.闭包有权访问包含函数内部的所有变量. 这个说的太晦涩了,而且我觉得很容易理解错,闭包就是一个嵌套函数嘛?但是我觉得 ...
- [国嵌笔记][023][ARM寻址方式]
寻找方式 1.处理器根据指令中给出的信息来找到指令所需操作数的方式 2.立即数寻址 操作数本身在指令中给出,立即数前加”#”表示立即数寻址,操作数在指令中 3.寄存器寻址 利用寄存器中的数值作为操作数 ...
- 获取屏幕宽高度与可视区域宽高度（availWidth、clientWidth、width、innerWidth）
经常会遇到需要获取屏幕宽度.高度,可视区域宽度.高度等问题,也就常跟这几个打交道,一不小心,还真爱弄混淆了. 先来列举下这几个吧: screen.availHeight.screen.availWid ...
- 配置国内PIP源方法
python开发者都知道,当我们pip install安装扩展库的时候,经常遇到安装失败(超时)等,有时候是因为国外镜像被屏蔽了,带来不少麻烦, 随着国内python开发的增多,越来越多企业都开放了自 ...
- nginx.conf文件
user www www; worker_processes auto; error_log /home/wwwlogs/nginx_error.log crit; pid /us ...
- 分享如何使用PHP将URL地址参数进行加密传输提高网站安全性
大家在使用PHP进行GET或POST提交数据时,经常会在URL带着参数进行传递,比如www.mdaima.com/get.php?id=1&page=5,这里就将id编号和page页码进行了参 ...
- android 基础03 -- Intent
Android 中的 Intent 是将要执行的操作的一种抽象的描述,是一个用于Android 各个组件之间传递消息的对象. Intent 的基本用法 Intent 基本的使用方法主要有三种: 启动一 ...
- vue学习笔记（三）——目录结构介绍
1.初始目录结构如下: 2.目录结构介绍 目录/文件 说明 build 最终发布的代码存放位置. config 配置目录,包括端口号等.我们初学可以使用默认的. node_modules npm 加载 ...