react.js 获取真实的DOM节点
为了获取真实的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 ...
- JS获取树的父节点及祖先节点
主体函数 export function findAllParent (node, tree, parentNodes = [], index = 0) { if (!node || node.fid ...
随机推荐
- 将 Callout 容器添加到移动设备应用程序中
在移动设备应用程序中,callout 是在应用程序顶部弹出的容器.该容器可以容纳一个或多个组件,并且支持不同类型的布局. callout 容器可以是模态或非模态容器.模态容器在其关闭之前接受所有的键盘 ...
- FMS+NGINX打造高带宽利用率的流媒体(音频+视频)环境
fms自身已经拥有了httpd,用来给客户端访问用,例如通过http的音频播放.众所周知,非专业的httpd自然有不专业之处,例如我遇到的情况就是经常http服务假死,或者在访问量庞大的时候会无缘无故 ...
- Nagios 系统监控基本安装配置过程详解
Nagios 是一款免费的开源 IT 基础设施监控系统,功能强大,灵活性强,能有效监控 Windows.Linux.VMware 和 Unix 主机状态,交换机.路由器等网络设置等.一旦主机或服务状态 ...
- 微信小程序之快速接入七牛云
小程序为什么要接入云? 目前,开发者在开发小程序过程中,主要遇到以下几个问题: 小程序发布大小超限 微信官方限制小程序的发布代码不能超过 1MB,而在实际开发过程中,一般的小程序难免会有图片等富媒体文 ...
- B+树的插入、删除(附源代码)
B+ Tree Index B+树的插入 B+树的删除 完整测试代码 Basic B+树和B树类似(有关B树:http://www.cnblogs.com/YuNanlong/p/6354029.ht ...
- ssh配置文件及问题解决
一 ssh的配置文鉴模板 Host AAA User gitolite3 HostName IP地址 IdentityFile ~/.ssh/key 二 下载代码的方法 1 ssh git2 git ...
- EM and GMM(Theory)
Part 1: Theory 目录: What's GMM? How to solve GMM? What's EM? Explanation of the result What's GMM? GM ...
- JSP 学习一
今天开始JSP的学习,作为Web开发人员,对JSP的开发是必不可少的,因此有必要对JSP进行掌握和学习:为此开始JSP的学习: 今日目标: 1)什么是JSP? 2)JSP的运行机制? 3)JSP的三种 ...
- Redis服务器搭建
下载并解压redis,然后进入redis所在目录 编译安装 make && make install 启动redis 服务 (加上&表示在后台运 ...
- 架构师之路——里氏替换原则LSP
定义: 如果对每一个对类型为S的对象o1,都有类型为T的对象o2,使得以T定义的所有程序P在所有的对象o1都代换成o2时,程序P的行为没有发生变化,那么类型S是类型T的子类型. 内容: 里氏替换原则通 ...