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日记系列目录

    下面是Hadoop日记系列的目录,由于目前时间不是很充裕,以后的更新的速度会变慢,会按照一星期发布一期的原则进行,希望能和大家相互学习.交流. 目录安排 1>  Hadoop日记Day1---H ...

  2. Notepad++常用插件

    Notepad++常用插件 1.CCompletion 进行文本的方法查找的工具. 会点击Ccompletion中的CCompletion菜单,就会出现菜单选择框 2.Compare 进行文本比较的工 ...

  3. win10系统安装web3js的正确方法

    在安装web3的时候 用npm  install web3 –save-dev 在win10系统下会一直安装不成功.后来换用了 cnpm install web3 –save-dev 安装时候报出:C ...

  4. Vigenere加密

    Vigenere加密法原理很简单,实现起来也不难.与普通的单码加密法不同,明文经过加密之后,每个字母出现的频率就不会有高峰和低峰. 密钥中字母代表行和明文中的字母代表行.在vigenere表中找到对应 ...

  5. 微软职位内部推荐-Senior NLP Scientist

    微软近期Open的职位: Job Title: Senior NLP Scientist Location: Suzhou, China Suzhou, one of the most vibrant ...

  6. PAT甲题题解-1007. Maximum Subsequence Sum (25)-求最大子区间和

    题意:给出n个数,求最大连续的子区间和,并且输出该区间的第一个和最后一个数. 如果所有数都小于0,那么则输出0,第一个数和最后一个数. 看数据k的范围,就知道肯定不能两层for循环来求区间和,O(n^ ...

  7. PAT甲题题解-1073. Scientific Notation (20)-字符串处理

    题意:给出科学计数法的格式的数字A,要求输出普通数字表示法,所有有效位都被保留,包括末尾的0. 分两种情况,一种E+,一种E-.具体情况具体分析╮(╯_╰)╭ #include <iostrea ...

  8. BackBone及其实例探究

      摘要 我们小组对MVC框架进行了学习.我的队友们已经在博客中对MVC的设计模式及优缺点进行了详细的探讨与分析,因此我的博客中只对MVC进行简单的介绍,而我将把重心放在Backbone MVC框架一 ...

  9. Linux内核分析第二周总结

    计算机是如何工作的? 计算机的"三大法宝": 存储程序计算机 函数调用堆栈 中断机制 堆栈是计算机运行高级语言的基础 函数调用堆栈: 32位X86通过函数调用堆栈来传递参数 使用e ...

  10. js页面实时显示时间

    1.通过getMonth()实现获取月份,从0开始计数,需要+1: 2.通过getDay()实现获取星期天数,从0开始,0表示星期日: 3.通过getDate()获取日期. 4.setTimeout( ...