<!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. Sitecore A / B测试

    测试您的Web内容非常重要.这是查看页面中的页面和组件是否达到预期效果的好方法.测试还可以让您放心,您的内容足够吸引人,以增加转化次数并最大限度地提高增长率. 测试如何运作? 测试通过向访问者随机显示 ...

  2. Python数据库添加时间

    利用pymysql往数据库中添加时间字段的方法: 1.导入datetime和pymysql:安装:pip install pymysql, datetime是内置 2.写入SQL语句:向对应的字段中间 ...

  3. 前端学习:JS(面向对象)代码笔记

    前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...

  4. 【华为云实战开发】8.如何快速搭建C#网站并实现持续集成？【华为云技术分享】

    1 概述 1.1 文章目的 本文通过一个实例介绍如何使用软件开发服务DevCloud完成一个C#Web项目的开发. 1.2 项目详情 1. 项目名称:超级冷笑话网站 2. 项目简介:一个Web网站,包 ...

  5. 2019-11-29-win10-uwp-颜色转换

    原文:2019-11-29-win10-uwp-颜色转换 title author date CreateTime categories win10 uwp 颜色转换 lindexi 2019-11- ...

  6. System.Windows.Forms.Control.CheckForIllegalCrossThreadCalls = false

    多线程程序中,新创建的线程不能访问UI线程创建的窗口控件,这时如果想要访问窗口的控件,发现无法对其控制. 这时可将窗口构造函数中的CheckForIllegalCrossThreadCalls设置为f ...

  7. Python - 解释器 - 第三天

    Python解释器 安装好Python3.x之后,我们可以使用文本文件去编写Python代码,编写完成后将扩展名改成.py结尾的文本文件. 想要执行编写好的.py文件就需要用到Python解释器. 解 ...

  8. tcbRouter

    tcb-router 基于koa风格的小程序·云开发云函数轻量级类路由库,主要用于优化服务端函数处理逻辑 安装 在云函数当前目录下安装:npm install --save tcb-router  使 ...

  9. Flutter 徐徐图之（一）—— 从搭建开发环境到 Hello World

    一.环境变量 由于众所周知的原因,在国内访问 Flutter 有时可能会受到限制,所以在开发之前,需要先配置环境变量 MacOS: 编辑 ~/.bash_profile 文件 vim ~/.bash_ ...

  10. windows下搭建vue+webpack的开发环境

    1. 安装git其右键git bash here定位比cmd的命令行要准确,接下来的命令都是利用git bash here.2. 安装node.js一般利用vue创建项目是要搭配webpack项目构建 ...