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日记Day11---主从节点接口分析

    一.NameNode 的接口分析 1. NameNode本质 经过前面的学习,可以知道NameNode 本身就是一个java 进程.观察RPC.getServer()方法的第一个参数,发现是this, ...

  2. linux查找进程pid并杀掉

    命令:ps aux | grep `pwd` | grep -v  grep | awk '{print $2}' | xargs kill -9 详细解释[我的有道云笔记,不知道为什么没法直接复制到 ...

  3. (幼儿园毕业)Javascript小学级随机生成四则运算

    软件工程第二次结对作业四则运算自动生成器网页版 一.题目要求 本次作业要求两个人合作完成,驾驶员和导航员角色自定,鼓励大家在工作期间角色随时互换,这里会布置两个题目,请各组成员根据自己的爱好任选一题. ...

  4. PS官方正式中文版(搬砖分享)

    https://pan.baidu.com/s/1c3IdQq0 PS官方正式中文版(搬砖分享) 注意事项: 1.安装开始前请先断网,在成功破解激活前请全程断网: 2.安装完成后先试运行软件一次,然后 ...

  5. Linux_01

    要安装centos系统,就必须得有centos系统软件安装程序,可以通过浏览器访问centos官网http://www.centos.org,然后找到Downloads  - >  mirror ...

  6. 基于skip-gram做推荐系统的想法

    一.人工智能之自然语言处理 自然语言处理(Natural Language Processing, NLP),是人工智能的分支科学,意图是使计算机具备处理人类语言的能力. “处理人类语言的能力”要达到 ...

  7. Linux DDos防御

    今天要说的就是一款能够自动屏蔽DDOS攻击者IP的软件:DDoS deflate. DDoS deflate介绍 DDoS deflate是一款免费的用来防御和减轻DDoS攻击的脚本.它通过netst ...

  8. Sprint report

    Sprint report 一.需求分析:随着在校大学生人数的不断增加,许多高校出现了许多个校区并存的局面,并且校区之间的地理位置跨度非常大,给高校选课带来了很大的不方便,数据处理手工操作,工作量大, ...

  9. 班级博客与coding地址

    队名 队长 成员1 成员2 成员3 成员4 成员5 团队博客地址 奥特曼小分队 李全清 胡林状 王栋 孙杏子 孙乐 刘泽良 http://www.cnblogs.com/atmxfd/ 蜗牛上天队 仝 ...

  10. 使用ejs模板引擎

    let express = require('express'); let fs = require('fs'); let ejs = require('ejs'); let app = expres ...