<script type="text/babel">
var Myelement=React.createClass({
handleClick:function(){
this.refs.myInput.focus();  this.refs.[refname]获取真实的节点 只有真实的DOM发生click事件之后 才会发生this.refs.myInput
},
render:function(){
return (
<div>
<input type="text" ref="myInput" />
<input type="button" value="focus" onclick={this.handleClick} /> 
</div>
);
}
});

ReactDOM.render(
<Myelement/>,
document.getElementById('example')
);

</script>

Myelement组件是封装起来,具有获取真实DOM节点功能的组件

获取DOM的真实节点的更多相关文章

  1. ionic2 获取dom节点

    ionic2页面上面获取dom节点,可以直接用原生的方法,document.querySelector()等, 但是不建议这样使用,建议使用官方的.就是要在获取的节点上加上#name的属性(相当于ge ...

  2. vue的数据双向绑定和ref获取dom节点

    vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...

  3. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

  4. Vue 双向数据绑定、事件介绍以及ref获取dom节点

    vue是一个MVVM的框架 M model V view MVVM  model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...

  5. Omi框架学习之旅 - 获取DOM节点 及原理说明

    虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式. 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获 ...

  6. React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  7. Dom 获取、Dom动态创建节点

    一.Dom获取 1.全称:Document     Object     Model 文档对象模型 2.我们常用的节点类型 元素(标签)节点.文本节点.属性节点(也就是标签里的属性). 3.docum ...

  8. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  9. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

随机推荐

  1. Harris角点算法

    特征点检测广泛应用到目标匹配.目标跟踪.三维重建等应用中,在进行目标建模时会对图像进行目标特征的提取,常用的有颜色.角点.特征点.轮廓.纹理等特征.现在开始讲解常用的特征点检测,其中Harris角点检 ...

  2. iOS 开发中使用到的小技巧汇总

    国庆即将来到,一个小项目也即将完成,把自己在项目中用的一些小技巧写出来,方便查找. 1,去掉分割线--动画设置透明度alpha //去掉tableView的分隔线:     self.tableVie ...

  3. Webview 中 Javascript 无法调用 Java 对象

    [问题产生] Webview 通过 addjavascriptInterface 传递对象给前端,一切正常.但是 Android官方已提醒此功能是有安全风险,改用 safe-java-js-webvi ...

  4. C++库研究笔记——生成一组随机数

    当试图用 srand(time(0)) rand() 生成一组随机数时发现,生成的数字很多都是「一样」的 经过测试:srand(seed); rand() 生成随机数,当seed一样时,生成的随机数相 ...

  5. TOMCAT 集群之 PERSISTENT SESSION

    tomcat的session保存在数据库中,不是很复杂,写下来供大家参考. 准备工作: 两架Ubuntu Server 12.04 64位,确定两级服务器可以互相ping的通并属于同一个网段 安装jd ...

  6. CSS_使用css布局

    本文出自:http://blog.csdn.net/svitter 1.   创建一个HTML页面, 其内容为一个无序列表,列表中至少包括了5本畅销书,每本书之前的项目符号必须採用概述封面的缩略图.这 ...

  7. UDP包的最大大小是多少?

      每个udp包的最大大小是多少?    65507 约等于 64K 为什么最大是65507?    因为udp包头有2个byte用于记录包体长度. 2个byte可表示最大值为: 2^16-1=64K ...

  8. 【转】如何优化Cocos2d-X游戏的内存

    Published on 2013 年 2 月 4 日, by donglin http://blog.chukong-inc.com/index.php/2013/02/04/%E5%A6%82%E ...

  9. I18N 国际编码

    <%@ page language="java" import="java.util.*, cn.hncu.domain.*" pageEncoding= ...

  10. Android5.0常用颜色属性说明

    在使用Eclipse的时代,我们很少去在style文件给整个应用或者Activity去设定颜色,那是因为即使设置也不会提升用户的视觉效果.但是材料设计号称让没有设计功底的人也能做出漂亮的App,那我们 ...