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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="app"></div>
  11.     <script src="common/react.js"></script>
  12.     <script src="common/react-dom.js"></script>
  13.     <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.js"></script>
  14.     <script type="text/babel">
  15.         class App extends React.Component {
  16.             constructor(opts) {
  17.                 super(opts)
  18.                 this.focus = this.focus.bind(this)
  19.             }
  20.             focus() {
  21.                 //this.refs.amie获取的是原生的"<input ref="amie" type="text" />"DOM
  22.                 this.refs.amie.focus()
  23.             }
  24.             render() {
  25.                 return <div>
  26.                     <input ref="amie" type="text" />
  27.                     <input type="button" value="focus" onClick={this.focus}/>
  28.                 </div>
  29.             }
  30.         }
  31.         ReactDOM.render(
  32.             <App />,
  33.             document.getElementById('app')
  34.         )
  35.     </script>
  36. </body>
  37. </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. Kubernetes学习之路（十九）之Kubernetes dashboard认证访问

    Dashboard:https://github.com/kubernetes/dashboard 一.Dashboard部署 由于需要用到k8s.gcr.io/kubernetes-dashboar ...

  2. 高精度加法--C++

    高精度加法--C++ 仿照竖式加法,在第一步计算的时候将进位保留,第一步计算完再处理进位.(见代码注释) 和乘法是类似的. #include <iostream> #include < ...

  3. Kubernetes并发控制与数据一致性的实现原理

    在大型分布式系统中,定会存在大量并发写入的场景.在这种场景下如何进行更好的并发控制,即在多个任务同时存取数据时保证数据的一致性,成为分布式系统必须解决的问题.悲观并发控制和乐观并发控制是并发控制中采用 ...

  4. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  5. C. Classy Numbers

    链接 [http://codeforces.com/contest/1036/problem/C] 题意 给你l,r,让你找在这个闭区间内位数不为0不超过3的个数,1<=l,r<=1e18 ...

  6. Daily Scrum NO.2

    工作概况 符美潇(PM) 昨日完成的工作 1.Daily Scrum.日常会议及日常工作的分配和查收. 2.为两名团队新成员制定了任务并录入TFS. 今日工作 1.Daily Scrum.日常会议及日 ...

  7. linux 内核 第二周 操作系统是如何工作的

    姬梦馨 原创博客 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一:计算机的三个法宝 存储程序计算机工 ...

  8. 10慕课网《进击Node.js基础（一）》初识promise

    首先用最简单的方式实现一个动画效果 <!doctype> <html> <head> <title>Promise animation</titl ...

  9. python获取命令行参数的方法（汇总）

    介绍python获取命令行参数的方法:getopt模和argparse模块. python版本:2.7 一.getopt模块 主要用到了模块中的函数: options, args = getopt.g ...

  10. Apache DBUtils框架 结果处理器

    package com.itheima.dbutil; import java.util.List; import java.util.Map; import org.apache.commons.d ...