react.js 获取真实的DOM节点实例(必看)


Posted in Javascript onApril 17, 2017

为了获取真实的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节点实例(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取当前select 元素值的代码
Apr 19 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
js的延迟执行问题分析
Jun 23 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
JavaScript实现点击图片换背景
Nov 20 Javascript
老生常谈jacascript DOM节点获取
Apr 17 #Javascript
老生常谈combobox和combotree模糊查询
Apr 17 #Javascript
vue实现简单表格组件实例详解
Apr 16 #Javascript
JavaScript实现网页头部进度条刷新
Apr 16 #Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 #Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 #Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 #Javascript
You might like
PHP中比较时间大小实例
2014/08/21 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
vue中的scope使用详解
2017/10/29 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python的print用法示例
2014/02/11 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
python样条插值的实现代码
2018/12/17 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
创业计划书的主要内容有哪些
2014/01/29 职场文书
村党支部书记承诺书
2014/05/29 职场文书
辩论赛主持人开场白
2015/05/29 职场文书