<!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. Mysql 工具mysqlbinlog

    [1]mysqlbinlog工具 在Windows环境下,安装完成Mysql后,在安装目录bin下会存在mysqlbinlog.exe应用程序. binlog是二进制内容文件,人类是无法直视的.而my ...

  2. 笔记本CPU性能排行

    截图如下: 1. 图1 2. 图2 3. 4. 5. 6. 7. 8. 谢谢浏览!

  3. Redis（六）管道(Pipelining)

    管道技术并不是Redis特有的,管道技术在计算机科学中有很多地方的应用. 来自wiki的解释: In computing, a pipeline, also known as a data pipel ...

  4. 【微信】微信小程序ISO上wx.scanCode BUG

    ================================================== BUG情况: 小程序在onLoad 主动调用wx.scanCode,安卓手机没有问题.iso调用失 ...

  5. .Net Core中文编码问题

    原文:https://www.cnblogs.com/ideacore/p/6964771.html 问题 .net core环境下,使用HttpClient执行GetStringAsync的时候,报 ...

  6. SpringMVC重要注解 @ControllerAdvice

    @ControllerAdvice,是Spring3.2提供的新注解,从名字上可以看出大体意思是控制器增强.让我们先看看@ControllerAdvice的实现: package org.spring ...

  7. C++初探

    //string1.cpp #include <iostream> int main() { using namespace std; ]={'d','o','g'}//这是char数组, ...

  8. 解决Hangfire 导致服务器内存飙涨

    最近因为项目需要调度作业服务,之前看张队推荐过一篇https://www.cnblogs.com/yudongdong/p/10942028.html 故直接拿过来实操,发现很好用,简单.方便  执行 ...

  9. EurekaClient自动装配及启动流程解析

    在上篇文章中,我们简单介绍了EurekaServer自动装配及启动流程解析,本篇文章则继续研究EurekaClient的相关代码 老规矩,先看spring.factories文件,其中引入了一个配置类 ...

  10. 2019CISCN web题赛-JustSoSo;love_math（复现）

    0x00前言 这几天从网上找个CMS源码开始练习审计,盯着众多的代码debug调呀调头晕脑胀的,还不错找到个文件读取和一个ssrf... 上月底结束的CISCN线上赛,web四道,仔细研究的2道,做出 ...