react.js 获取真实的DOM节点

时间:2021-11-17 00:35:34

为了获取真实的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节点的更多相关文章

  1. react入门-----(jsx语法,在react中获取真实的dom节点)

    1.jsx语法 var names = ['Alice', 'Emily', 'Kate']; <!-- HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的 ...

  2. js学习总结:DOM节点二(dom基本操作)

    一.DOM继承树 DOM——Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称 ...

  3. angular&period;js 动态插入删除dom节点

    angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...

  4. JS中级 - 01:DOM节点

    1元素属性   1.1childNodes 返回元素的一个子节点的数组 (不推荐,建议用非标准children代替) 提醒:只包含一级子节点,不包含后辈孙级别以下节点. children:返回元素的一 ...

  5. js学习总结:DOM节点一(选择器,节点类型)

    DOM:document object model 文档对象模型 DOM就是整个HTML文档的关系图谱(代表整个HTML文档),可以理解为下图: 一.查看元素节点 1.document.getElem ...

  6. js 获取元素所有兄弟节点实例

    比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li——不包括红的li——的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你 ...

  7. vue 钩子函数中获取不到DOM节点

    原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html 两种解决方案: 1:官方解决方案: 受到 HTML 本身的一些 ...

  8. js获取和设置DOM样式函数cssStyle(类似于jquery的&dollar;&lpar;elem&rpar;&period;css&lpar;&rpar;)

    如题,相信这个函数百度一搜一大推,但令人匪夷所思的是这些函数都写的“奇形怪状的”,例如http://www.cnblogs.com/windows7/archive/2010/03/30/170064 ...

  9. React获得真实的DOM操作

    真实的DOM操作 ------------------------------------------------------------------------------------------- ...

随机推荐

  1. struts2&period;3&period;16所需的基本的jar包---------SSH升级包不是整体全部都升级的

    struts2.3.16所需的基本的jar包   jar包放多了就报Exception什么Unable to load....上网搜了半天也没有能解决的 下面所说的jar包放到WEB-INF/lib以 ...

  2. 手动关闭searchDisplayControlelr

    两行代码搞定 [searchBar endEditing:YES]; [searchDisplayControllersetActive:NO];

  3. 三元运算符和GridView数据显示

    三元运算符嵌套使用:<%# Eval("InsertType").ToString() == "0" ? "数据库" : Eval(& ...

  4. hdu 4920 Matrix multiplication(矩阵乘法)2014多培训学校5现场

    Matrix multiplication                                                                           Time ...

  5. Nginx访问限速配置方法详解

    开发测试阶段在本地限速模拟公网的环境,方便调试.投入运营会有限制附件下限速度,限制每个用户的访问速度,限制每个IP的链接速度等需求. 配置简单,只需3行,打开"nginx根目录/conf/n ...

  6. mac制作icns图标

    Key steps:1) Prepare a 1024x1024 png or jpeg file;2) Download fasticns utility to convert the icon t ...

  7. node上传文件并在网页中展示

    一.需求 1.当用户请求http://domain/start时,可以看到一个欢迎页面,页面上有一个文件上传的表单. 2.用户可以选择一个图片并提交表单,随后文件将被上传到http://domain/ ...

  8. win10系统进入BIOS

    按住shift+重启,在重启过程中界面会出现“疑难解答”,点击后,在新的界面点击“高级选项”,之后在新界面上点击“UEFI固件设置”,最后点击重启,重启过程中点击Delete键,就进入了BIOS界面了 ...

  9. 安装并使用Oracle SQL Developer访问Oracle

    ---问题 如何安装并使用Oracle SQL Developer访问Oracle. ---步骤 Oracle SQL Developer是Oracle官方出品的免费图形化开发工具,相对SQL*Plu ...

  10. C语言——单链表初始化、求表长、读表元素、插入元素

    头文件Linear.h // 单链表的类型定义 typedef struct node { int data; // 数据域 struct node *next; // 指针域 }Node, *Lin ...