获取DOM的真实节点
<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的真实节点的更多相关文章
- ionic2 获取dom节点
ionic2页面上面获取dom节点,可以直接用原生的方法,document.querySelector()等, 但是不建议这样使用,建议使用官方的.就是要在获取的节点上加上#name的属性(相当于ge ...
- vue的数据双向绑定和ref获取dom节点
vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- Vue 双向数据绑定、事件介绍以及ref获取dom节点
vue是一个MVVM的框架 M model V view MVVM model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...
- Omi框架学习之旅 - 获取DOM节点 及原理说明
虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式. 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获 ...
- React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- Dom 获取、Dom动态创建节点
一.Dom获取 1.全称:Document Object Model 文档对象模型 2.我们常用的节点类型 元素(标签)节点.文本节点.属性节点(也就是标签里的属性). 3.docum ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
随机推荐
- Git简介:
Git中文文档 1.详解在Visual Studio中使用git版本系统(图文) 2.GitExtensions下载地址:http://gitextensions.codeplex.com/ 3.Gi ...
- JavaScript----this陷阱的最全收集
原文翻译: JavaScript来自一门健全的语言,所以你可能觉得JavaScript中的this和其他面向对象的语言如java的this一样,是指存储在实例属性中的值.事实并非如此,在JavaScr ...
- C#- 控制台Timer
很少在控制台上用定时器,最近要用到,百度了一遍文章.很不错,摘下来,作备忘 关于C#中timer类 在C#里关于定时器类就有3个 1.定义在System.Windows.Forms里 2.定义在Sys ...
- Delphi- DLL操作
动态链接库(Dynamic Link Library)是一个可以执行的并可以被多个Windows应用程序共享的程序模块(Module).模块中包含代码.数据和资源. 动态链接库的优点:不用重复编译和链 ...
- 点击modal确定键后删除tr
做第一个笔记,关于 “书单”.2016-09-03关于一个表格调用modal后,在点击表格中的删除按钮弹出modal,点击确定删除后,将一整行tr 删除的功能. 以下内容为table,表示为某班学生. ...
- HDU5100Chessboard(数论)
HDU5100Chessboard(数论) 题目链接 题目大意:用k∗1的瓷砖区铺n∗n的矩形,问能铺上的最大的面积. 解题思路:这题没有直接得出结论:l = n%k, ans = max[(n^2 ...
- 【转】C++中多重继承的二义性及解决办法
转自:http://www.cnblogs.com/lintong/archive/2012/07/28/2613002.html 1. 什么是多重继承的二义性 class A{ public: vo ...
- Unity: How to build and debug external DLLs
法一:http://forum.unity3d.com/threads/161685-How-to-build-and-debug-external-DLLs http://docs.unity3d. ...
- SQL Server 2008 游标使用实例
本文使用以下两张数据库表作为演示对象. 1 游标初探--使用游标进行遍历 declare @classAndStudent table( class_id int, --班级ID class_name ...
- MySQL性能监控工具-MONyog
1.登录配置界面 2.show processlist 查看当前使用的进程 3.警告建议你应该优化哪些参数. 4.介绍一下慢查询的配置,其它的可以自己配置,都是简单的英文. 该工具,用着还不错.其 ...