为了获取真实的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.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的$(elem).css())

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

  9. JS获取树的父节点及祖先节点

    主体函数 export function findAllParent (node, tree, parentNodes = [], index = 0) { if (!node || node.fid ...

随机推荐

  1. 一步一步Asp.Net MVC系列_权限管理设计

    http://www.cnblogs.com/mysweet/archive/2012/07/26/2610793.html

  2. 开箱即用 - jwt 无状态分布式授权

    基于JWT(Json Web Token)的授权方式 JWT 是JSON风格轻量级的授权和身份认证规范,可实现无状态.分布式的Web应用授权: 从客户端请求服务器获取token, 用该token 去访 ...

  3. HDU2063(二分图最大匹配)

    过山车 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  4. Chrome 插件集锦

    原文出处:CN_Simo 子曾曰:"工欲善其事,必先利其器.居是邦也."--语出<论语·卫灵公>:其后一百多年,荀子也在其<劝学>中倡言道:"吾尝 ...

  5. 应用程序初次运行数据库配置小程序(Java版)

    应用程序初始化数据库配置小程序 之前写过一个Java版的信息管理系统,但部署系统的时候还需要手动的去配置数据库和导入一些初始化的数据才能让系统运行起来,所以我在想是不是可以写一个小程序在系统初次运行的 ...

  6. Python学习--16 正则表达式

    正则表达式是一种描述性的语言,用来匹配字符串.凡是符合规则的字符串,我们认为就是匹配了. 正则表达式并非Python独有的,它与语言无关.很多语言都支持正则表达式. 我们经常用正则表达式来匹配电子邮件 ...

  7. 简单三层分页aspnetpager控件(欢迎指点)

    首先添加引用AspNetpager.dll(将.dll文件放在bin中进行引用) 接着添加<%@ Register Assembly="AspNetPager" Namesp ...

  8. React核心内容归纳总结

    状态.属性.组件API.组件的生命周期 当react的状态改变时,自动执行this.render()方法更新组件ES6写React的时候,事件里不会自动绑定this,需要自己绑定,或者直接在const ...

  9. 【.Net Framework 体积大?】不安装.net framework 也能运行!?开篇叙述-1

    [声明:请尊重作者micro-chen的原创,抓文章,请添加来源和作者署名.作者保留追责权利.......] 写在前言 看着日渐没落的.net ,心里多少有了点悲凉.国内的越来越多的新兴公司 都是JA ...

  10. 导入AS项目出现类文件全部报红色J 原因

    大家可能遇到过这么一个问题  就是用androidStudio 导入一个新的demo的时候会出现下图的字样 看了是不是很懵逼 我当时看了也是一脸懵逼 这是什么玩意啊.也不报错.也不提示哪里错了 后来我 ...