<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. JS----构造函数与原型prototype 区别

    构造函数方法很好用,但是存在一个浪费内存 通过原型法分配的函数是所有对象共享的.通过原型法分配的属性是独立.-----如果你不修改属性,他们是共享 如果我们希望所有的对象使用同一一个函数,最好使用原型 ...

  2. void,extern,sizeof

    高手潜规则:禁用goto 程序质量与goto出现次数成反比 void指针的意义 1.C语言规定只有相同类型的指针才可以相互赋值 2.void*指针作为坐值用于"接收"任意类型的指针 ...

  3. 字符串匹配之KMP算法

    KMP算法使用前缀函数来模拟有限自动机的后缀函数,前缀函数通过计算模式与其自身的偏移匹配的信息,本身的证明很复杂,关键在于弄懂其核心思想,下面就不赘述了,仅仅贴出代码: #include <io ...

  4. GridControl 复合表头(多行标题)

    说明: 最好是通过编辑视图进行设计,后台编码有点麻烦. 例图:(上面的GC是后台编写 ,下面的是设计器设计) 后台代码编写: public void InitCtrl() { DevExpress.X ...

  5. 你真的知道C#的TryParse吗?

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:你真的知道C#的TryParse吗?.

  6. flex学习网站地址

    http://hacker47.iteye.com/blog/213887 http://www.cuplayer.com/player/PlayerCode/Flex/ http://bbs.9ri ...

  7. 面向对象(POP)和面向过程(OOP)

    我对面向对象和面向过程的理解 面向过程:(procedure oriented programming 即:POP) 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时 ...

  8. 破解C#的readonly只读字段

    破解C#的readonly只读字段 目录 请允许我再唠叨几句const和readonly 修改readonly字段: 计策1:反间计 -- 反射修改 计策2:借刀杀人--调节字段偏移位置的结构体来修改 ...

  9. ls -l命令详解

    输入: ls -l 输出: -rwxr-xr-x root root May : b 第一个字段(1个字符):文件类型 - :普通文件 d:目录文件 b:块设备文件(block) c:字符设备文件(c ...

  10. Bootstrap--组件之按钮组

    什么是按钮组呢?简单解释:就是把一堆的按钮放在一行或者一列中.下面来看一个实例. 按钮组嘛,首先是按钮,所以会用到.btn这个类,还有就是bootstrap提供的按钮组.btn-group这个类,所以 ...