为了获取真实的dom节点,文本输入框必须有一个 ref
属性,然后 this.refs.[refName]
就会返回这个真实的 DOM 节点。
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput"/>
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
}); ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
react.js 获取真实的DOM节点的更多相关文章
-
react入门-----(jsx语法,在react中获取真实的dom节点)
1.jsx语法 var names = ['Alice', 'Emily', 'Kate']; <!-- HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的 ...
-
js学习总结:DOM节点二(dom基本操作)
一.DOM继承树 DOM——Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称 ...
-
angular.js 动态插入删除dom节点
angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...
-
JS中级 - 01:DOM节点
1元素属性 1.1childNodes 返回元素的一个子节点的数组 (不推荐,建议用非标准children代替) 提醒:只包含一级子节点,不包含后辈孙级别以下节点. children:返回元素的一 ...
-
js学习总结:DOM节点一(选择器,节点类型)
DOM:document object model 文档对象模型 DOM就是整个HTML文档的关系图谱(代表整个HTML文档),可以理解为下图: 一.查看元素节点 1.document.getElem ...
-
js 获取元素所有兄弟节点实例
比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li——不包括红的li——的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你 ...
-
vue 钩子函数中获取不到DOM节点
原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html 两种解决方案: 1:官方解决方案: 受到 HTML 本身的一些 ...
-
js获取和设置DOM样式函数cssStyle(类似于jquery的$(elem).css())
如题,相信这个函数百度一搜一大推,但令人匪夷所思的是这些函数都写的“奇形怪状的”,例如http://www.cnblogs.com/windows7/archive/2010/03/30/170064 ...
-
React获得真实的DOM操作
真实的DOM操作 ------------------------------------------------------------------------------------------- ...
随机推荐
-
struts2.3.16所需的基本的jar包---------SSH升级包不是整体全部都升级的
struts2.3.16所需的基本的jar包 jar包放多了就报Exception什么Unable to load....上网搜了半天也没有能解决的 下面所说的jar包放到WEB-INF/lib以 ...
-
手动关闭searchDisplayControlelr
两行代码搞定 [searchBar endEditing:YES]; [searchDisplayControllersetActive:NO];
-
三元运算符和GridView数据显示
三元运算符嵌套使用:<%# Eval("InsertType").ToString() == "0" ? "数据库" : Eval(& ...
-
hdu 4920 Matrix multiplication(矩阵乘法)2014多培训学校5现场
Matrix multiplication Time ...
-
Nginx访问限速配置方法详解
开发测试阶段在本地限速模拟公网的环境,方便调试.投入运营会有限制附件下限速度,限制每个用户的访问速度,限制每个IP的链接速度等需求. 配置简单,只需3行,打开"nginx根目录/conf/n ...
-
mac制作icns图标
Key steps:1) Prepare a 1024x1024 png or jpeg file;2) Download fasticns utility to convert the icon t ...
-
node上传文件并在网页中展示
一.需求 1.当用户请求http://domain/start时,可以看到一个欢迎页面,页面上有一个文件上传的表单. 2.用户可以选择一个图片并提交表单,随后文件将被上传到http://domain/ ...
-
win10系统进入BIOS
按住shift+重启,在重启过程中界面会出现“疑难解答”,点击后,在新的界面点击“高级选项”,之后在新界面上点击“UEFI固件设置”,最后点击重启,重启过程中点击Delete键,就进入了BIOS界面了 ...
-
安装并使用Oracle SQL Developer访问Oracle
---问题 如何安装并使用Oracle SQL Developer访问Oracle. ---步骤 Oracle SQL Developer是Oracle官方出品的免费图形化开发工具,相对SQL*Plu ...
-
C语言——单链表初始化、求表长、读表元素、插入元素
头文件Linear.h // 单链表的类型定义 typedef struct node { int data; // 数据域 struct node *next; // 指针域 }Node, *Lin ...