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日记Day13---使用hadoop自定义类型处理手机上网日志

    测试数据的下载地址为:http://pan.baidu.com/s/1gdgSn6r 一.文件分析 首先可以用文本编辑器打开一个HTTP_20130313143750.dat的二进制文件,这个文件的内 ...

  2. MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”

    问题 MSBUILD : error MSB3428: 未能加载 Visual C++ 组件"VCBuild.exe".要解决此问题,1) 安装 .NET Framework 2. ...

  3. 最简单的XML用法

    在传递数据时,XML和JSON是最常用的数据格式,SQL Server从很早的版本就开始支持XML格式,而对于JSON格式,SQL Server从2016版本开始支持.大多数数据库系统并没有升级到SQ ...

  4. Linux删除多余内核

    查看已安装内核 sudo dpkg --get-selections |grep linux-image 查看当前内核 uname -r 卸载内核 sudo apt-get remove 内核名称 配 ...

  5. 企业落地Kubernetes的问题与对策

    在当今云计算领域,“容器技术”已经从三四年前的炒作期正式进入了产业落地期,而Kubernetes作为容器平台的标准已经得到了广泛应用. Kubernetes从2014年6月由Google宣布开源,到2 ...

  6. EOS 权限管理之-权限的使用

    首先,跟大家说声抱歉,由于之前一直在准备EOS上线的一些工作,所以,很长时间没有更新内容.今天正好有时间,也想到了一些题材,就来说一下这个话题.本文完全是个人见解,如有不当之处,欢迎指出. 前提回顾: ...

  7. Alpha版使用说明

    1引言 1 .1编写目的 针对我们发布的alpha版本做出安装和使用说明,使参与内测的人员及用户了解软件的使用方法和相关内容. 1 .2参考资料 <javaWeb程序设计基础><di ...

  8. 团队冲刺随笔合集—Beta阶段

    第一篇:http://www.cnblogs.com/Team-Blog/p/9049271.html 第二篇:https://www.cnblogs.com/Team-Blog/p/9064478. ...

  9. python自定义mininet拓扑

    python自定义mininet拓扑 前言 闲来无聊,想到很早之前都是用GUI来自定义拓扑,这次用python来自定义一下(以前留下的苦果) 转自Mininet 自定义网络拓扑 过程相对简单 实现过程 ...

  10. Postgresql迁移数据文件存放位置

    1. POSTGRESQL的安装 centos7 里面默认的pgsql的版本是 如果想用更高的版本需要执行以下如下的命令 rpm -ivh https://download.postgresql.or ...