vue有ref来获取template里面的子组件/子元素，react当然也有：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app"></div>

    <script src="common/react.js"></script>

    <script src="common/react-dom.js"></script>

    <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.js"></script>

    <script type="text/babel">

        class App extends React.Component {

            constructor(opts) {

                super(opts)

                this.focus = this.focus.bind(this)

            }

            focus() {

                //this.refs.amie获取的是原生的"<input ref="amie" type="text" />"DOM

                this.refs.amie.focus()

            }

            render() {

                return <div>

                    <input ref="amie" type="text" />

                    <input type="button" value="focus" onClick={this.focus}/>

                </div>

            }

        }

        ReactDOM.render(

            <App />,

            document.getElementById('app')

        )

    </script>

</body>

</html>

react入门-refs的更多相关文章

  1. react入门（3）

    在第一篇文章里我们介绍了jsx.组件.css写法  点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环  点击查 ...

  2. react入门（4）

    首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...

  3. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  4. React入门 (1)—使用指南（包括ES5和ES6对比）

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  5. React入门简单实践

    参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...

  6. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  7. React入门2

    React 入门实例教程 最简单开始学习 JSX 的方法就是使用浏览器端的 JSXTransformer.我们强烈建议你不要在生产环境中使用它.你可以通过我们的命令行工具 react-tools 包来 ...

  8. react入门——慕课网笔记

    一. jsx 1. 被称为语法糖:糖衣语法,计算机语言中添加的某种语法,对语言的功能没有影响,更方便程序员使用,增加程序的可读性,降低出错的可能性 类似的还有(coffeescript,typescr ...

  9. React入门---基础知识-大纲-1

    -----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...

随机推荐

  1. Hadoop开发第6期---HDFS的shell操作

    一.HDFS的shell命令简介 我们都知道HDFS 是存取数据的分布式文件系统,那么对HDFS 的操作,就是文件系统的基本操作,比如文件的创建.修改.删除.修改权限等,文件夹的创建.删除.重命名等. ...

  2. [BZOJ4857][JSOI2016]反质数序列[最大点独立集]

    题意 在长度为 \(n\) 的序列 \(a\) 中选择尽量长的子序列,使得选出子序列中任意两个数的和不为质数. \(n\leq3000\ ,a_i\leq10^5\). 分析 直接按照奇偶性建立二分图 ...

  3. Elasticsearch date 类型详解

    引言 一直对 elasticsearch 中的 date 类型认识比较模糊,而且在使用中又比较常见,这次决定多花些时间,彻底弄懂它,希望能对用到的同学提供帮助. 注意:本文测试使用是 elastics ...

  4. 利用privoxy劫持http网站数据,插入广告,获取用户名,密码

    看了几篇privoxy的文章,感觉讲的都不详细,在此整理一遍. 注:本文下面的内容仅讨论思路,作为技术交流之用,请勿用作非法途径. Privoxy是一款带过滤功能的代理服务器,针对HTTP.HTTPS ...

  5. 前端项目模块化的实践2：使用 Webpack 打包基础设施代码

    以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript ...

  6. 将Centos 的默认yum源改为阿里云的yum源后出现的问题

    阿里各版本yum源如下: Centos5:http://mirrors.aliyun.com/repo/Centos-5.repo Centos6:http://mirrors.aliyun.com/ ...

  7. 【转】Cocos2d-x 3.x基础学习: 总结数学类Vec2/Size/Rect

    转载:http://www.taikr.com/article/1847 在Cocos2d-x 3.x中,数学类Vec2.Size.Rect,是比较常用的类.比如设置图片位置,图片大小,两图片的碰撞检 ...

  8. QUIC和TCP

    作者:henrystark henrystark@126.com Blog: http://henrystark.blog.chinaunix.net/ 日期:20140626 本文遵循CC协议:署名 ...

  9. 关于sql server2008数据库的连接的几个问题及解决办法

    写在开头 不得不说给一台新的服务器配置和部署的确是个不小的工程,在这里先感谢我们的DEV焉域政同学在这方面做出的一些贡献:把安装过程极为困难的sql server2008成功安装到服务器上,并且为我们 ...

  10. Linux内核分析作业 NO.4

    扒开系统调用的三层皮(上) 于佳心 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-100002900 ...