<!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>React-props</title>

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

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

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

</head>

<body>

  <div id="demo"></div>

  <script type="text/babel">

      /*生命周期（挂载阶段，更新阶段，销毁阶段）*/

      let MyForm = React.createClass({

        handleChange: function () {

          let inputvalue = ReactDOM.findDOMNode(this.refs.gqiaox).value

          console.log(inputvalue)

        },

        render: function () {

          return (

            <form >

              <input type="text" onChange={this.handleChange} ref="gqiaox" defaultValue="jspang"/>

            </form>

          )

        }

      })

      ReactDOM.render(

        <MyForm/>,

        document.getElementById("demo")

      );

    </script>

</body>

</html>

　　

React 获取真实Dom v8.6.2版本的更多相关文章

  1. [react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?

    壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...

  2. React获得真实的DOM操作

    真实的DOM操作 ------------------------------------------------------------------------------------------- ...

  3. React系列文章：无状态组件生成真实DOM结点

    在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name ...

  4. React系列文章：JSX生成真实DOM结点

    在上一篇文章中,我们介绍了Babel是如何将JSX代码编译成可执行代码的,随后也实现了一个自己的解析器,模拟了Babel编译的过程. 现在我们再来回顾一下,假定有如下业务代码: const style ...

  5. React: 有状态组件生成真实DOM结点

    上次我们分析了无状态组件生成 DOM 的过程,无状态组件其实就是纯函数,它不维护内部的状态,只是根据外部输入,输出一份视图数据.而今天我们介绍的有状态组件,它有内部的状态,因此在组件的内部,可以自行对 ...

  6. React: 无状态组件生成真实DOM结点

    在上一篇文章中,我们总结并模拟了 JSX 生成真实 DOM 结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({ ...

  7. React: JSX生成真实DOM结点

    在上一篇文章中,我们介绍了 Babel 是如何将 JSX 代码编译成可执行代码的,随后也实现了一个自己的解析器,模拟了 Babel 编译的过程. 现在我们再来回顾一下,假定有如下业务代码: const ...

  8. react 的虚拟dom

    前端优化的主要方面就是减少页面的DOM操作,减少重排和重绘,React在这方面做了优化,采用了所谓的虚拟DOM,其实我们平时也会遇到虚拟DOM,只是你没有注意罢了,请听我娓娓道来.  所谓的虚拟DOM ...

  9. react.js 获取真实的DOM节点

    为了获取真实的dom节点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点. var MyComponent = React.crea ...

随机推荐

  1. python的深浅拷贝-成为马老师的弟子

    参考链接 骏马金龙 前提 想要了解深浅拷贝之前必须要知道可变和不可变类型,和他们的特性 不可变类型 数字 字符串 元组 不可变集合 特性:改变值,会创建新的内存空间存储数据 可变类型 列表 字典 可变 ...

  2. ReentrantLock使用示例

    /** * ReentrantLock是独占锁 * Lock锁的使用,把锁和要用锁同步的代码放在一起,这里就是放在Printer类中了 * 获取到锁后,最后要在finally代码块中手动释放锁 */ ...

  3. everything 13问

    [1]everything 由来? everything 是澳大利亚人David Carpenter开发的一个运行于windows系统,基于文件.文件夹名称的快速免费搜索引擎. 自从问世以来,因其占用 ...

  4. Portainer容器可视化管理工具使用文档

    本文内容 主要介绍下Portainer的Docker使用方式,基于当前最新版v1.22.1,使用Docker的本地部署,并连接另一台服务器进行测试,更多请参考官网https://www.portain ...

  5. ​ Markdown

    Cygwin ​ Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. ​ Markdown具有一系列衍生版本,用于扩展Markdown ...

  6. HTML5 下拉控件绑定数据

    <select id="CommunityList" class="form-control" > <option>請選擇社團</ ...

  7. TCP 协议 精解

    http://www.cnblogs.com/sunev/archive/2012/06/23/2559389.html

  8. spring AOP的两种配置

    xml配置 定义要被代理的方法的接口 public interface TestAop { public void print(String s); } 实现上述接口 public class Tes ...

  9. css3+JS实现幻灯片轮播图

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. 监控微信小程序中的慢HTTP请求

    摘要: 请求时间太长,影响用户体验,使用 Fundebug 监控慢请求. Fundebug 的微信小程序监控插件在 0.5.0 版本已经支持监控 HTTP 请求错误,在小程序中通过wx.request ...