获取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双向数据绑定 ...
随机推荐
- Jquery常用方法篇(一)
1.add方法:将匹配的元素添加到当前的jquery对象集合中. 语法 add(expr,[context]) 参数1表示 用于匹配元素选择器(待添加的对象),或者用于动态生成的HTML代码(字符串) ...
- Yii2 多域名跨域同步登录退出
在平台开发过程中,项目分为前台(frontend)www.xxx.com和后台(backend) yun.xxx.com两部分,绑定两个域名, 我们知道在没有绑定域名的时候前后台可以同步登录和退出,但 ...
- C++中模板使用详解
转自:http://www.360doc.com/content/09/0403/17/799_3011262.shtml 1. 模板的概念. 我们已经学过重载(Overloading),对重载函数而 ...
- Unity3D问题之EnhanceScollView选择角色3D循环滚动效果实现
需求 呈现3D效果(2D素材)选择角色效果 滚动保证层级.缩放比例.间距正常尾随 循环滚动 这个界面需求一般也会有游戏会採用(貌似有挺多) 怎样实现 实现技术关键点 (3D循环效果,依据数学函数和细致 ...
- Unityclient通信測试问题处理(二)
Unityclient通信測试问题处理(二) 在client的通信測试过程中.场景载入的问题给自己带来了不小的麻烦.由于消息的解析方法在单独的监听线程中调用,这也就意味着无法在消息的解析方法中调用Un ...
- Android ListView分页加载时图片显示问题
场景:Android ListView需要分页加载,每个item中会有图片,图片又是从网络下载的. 问题:在滑动加载下一页时,上一页的图片明明已经下载完成了,但是无法显示出来. Bug重现: 1,加载 ...
- android88 录音机
package com.itheima.recorder; import android.os.Bundle; import android.app.Activity; import android. ...
- kcachegrind gui for callgrind
DocumentationScreenshotsDownload/SourcesLinksRoadmapBugs & Wishes This is the homepage of the pr ...
- debian添加新硬盘
1.查看硬盘设备,找到要添加的硬盘/dev/sdbfdisk -l 2.创建硬盘分区fdisk /dev/sdb进入到fdisk程序 p 命令显示硬盘的分区表信息n 添加新分区 (1) n 添加新 ...
- 通过NSURLProtocol拦截HTTP转HTTPS来整合SPDY的记录
众所周知,iOS 9.0之后苹果引入ATS限制,苹果也推荐尽量不要使用HTTP通讯了,毕竟是很不安全的.而国内各个有(wu)节操的运营商也会经常篡改请求HTTP请求.所以如果可能,在不影响性能的情况下 ...