<!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. Ansible17：Playbook之tags

    目录 简介 为task打tag 使用tag 执行指定tag的task 排除指定tag的task 查看playbook中的所有tag 打tag的几种方式 ansible内置tag 简介 在大型项目当中, ...

  2. WPF Adorner 弹出式工具栏 例子

    源于MSDN 一个问题. 问:如何做出类似word的文字选中后工具栏弹出和动画效果. 我用的是adorner,其实用popup也是可以的. 效果图: 中间黑色部分代表真正的工具栏. xaml代码: & ...

  3. WPF 精修篇 管理资源字典

    原文:WPF 精修篇 管理资源字典 样式太多  每个界面可能需要全局的样式 有没有肯能 WPF 中的样式 像Asp.net中 的CSS一样管理那 有的 有资源字典 BurshDictionary &l ...

  4. NPOI Excel同一个单元格 多种字体

    public static void CreateFont() { IWorkbook workbook = new HSSFWorkbook(); workbook.CreateSheet(&quo ...

  5. NetCoreApi框架搭建（二、Nlog使用配置）

    本文只配置了简单文件存储 1.添加nuget包 2.添加日志配置文件nlog.config 这里配置了三个target区分不同的日志,具体配置需要自己研究,推荐链接https://www.cnblog ...

  6. CLOS ： Common Lisp 的面向对象支持

    1.  defclass   ( :accessor/reader/writer ;   :initarg  ;  :initform 2. defgeneric 3. defmethod ----- ...

  7. P2352 队爷的新书(差分)

    题目 P2352 队爷的新书 解析 题目意思是 给你n个区间,选择一个数x,使\(x\times覆盖x的区间个数\) 最大 和这个题差不多 差分,离散化一下,在区间的\(l\)处\(+1\),\(r+ ...

  8. 02、JDBC查询

    ① 向数据库发送SQL查询语句 首先使用Statement声明一个SQL语句对象,然后让已创建的连接对象con调用方法createStatement()创建SQL语句对象. Statement sql ...

  9. 隐马尔科夫模型(Hidden Markov Models) 系列之一

    转自:http://blog.csdn.net/eaglex/article/details/6376826 介绍(introduction) 通常我们总是对寻找某一段时间上的模式感兴趣,这些模式可能 ...

  10. 如何构思你的iOS App应用

    转自:http://mobile.51cto.com/hot-311134.htm 在twitter上,听到不少人问,我也有App 在App Store上面卖,为什么我的App卖得这么少啊?于是我就上 ...