<!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. Linux系统安装snmp服务

    Linux安装snmp详解 Snmp一种网络之间的传输协议,通过snmp可以采集很多指标比如cpu.内存及磁盘的信息,现在越来越多的网络设备基本上都支持snmp,本文介绍了snmp的安装过程. 二.安 ...

  2. [5]Hexo静态博客绑定域名及域名解析

    示例: http://zsy.xyz/ 前提预设:[4]Hexo静态博客背景及界面显示优化配置 [3]hexo+github搭建个人博客的主题配置 [2]hexo+github搭建个人博客的简单使用 ...

  3. 图解微信小程序---添加tabBar底部菜单，添加已做好轮播图操作

    图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...

  4. 《 .NET并发编程实战》实战习题集 - 4 - 如何重用一次性资源

    如何重用以下一次性资源代码呢? string text; using (var stream = new StreamReader(path)) { text = stream.ReadToEnd() ...

  5. 【Navicat】使用navicat执行sql 查询速度很慢解决方法

    ========================== Navicat 远程连接Mysql执行普通sql速度慢问题: 场景: navicat可以连接上 远程服务器的mysql.但是在navicat执行最 ...

  6. Debian CentOS修改时区

    Debian修改时区: dpkg-reconfigure tzdata https://wiki.debian.org/TimeZoneChanges CentOS修改时区: timedatectl ...

  7. C# Newtonsoft.Json.JsonReaderException:“Could not convert string to decimal:

    使用Newtonsoft.Json,报以上错误,问题的原因是有"",把“”替换成null: 以前的json: [{"WengvNj":"df5c38c ...

  8. Centos7 Putty SSH密钥登录

    在本地电脑打开PuTTYgen程序,点击Generate生成密钥,可以再设置一层密码,保存公钥和私钥到本地文件,保存好,最好多处备份 先用密码登录远程Centos vim ~/.ssh/authori ...

  9. ASP.NET CORE 2.2 因外键设置的双向导航对象序列化报 循环错误问题的解决

    报错如下: 设置的示例: 解决方案: 在Startup.cs文件中,增加如下代码: services.AddMvc().SetCompatibilityVersion(CompatibilityVer ...

  10. Python中itertools.groupby分组的使用

    Python中itertools.groupby分组的使用 有时候我们需要给一个列表按照某个属性分组,可以借助groupby来实现. 比如:一下列表我想以严重程度给它分组,并求出每组的元素个数. fr ...