<!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. 【Luogu5349】幂（分治FFT）

    [Luogu5349]幂(分治FFT) 题面 洛谷 题解 把多项式每一项拆出来考虑,于是等价于要求的只有\(\sum_{i=0}^\infty i^kr^i\). 令\(f(r)=\sum_{i=0} ...

  2. 可落地的DDD(5)-战术设计

    摘要 本篇是DDD的战术篇,也就是关于领域事件.领域对象.聚合根.实体.值对象的讨论.也是DDD系列的完结篇. 这一部分在我们团队争论最多的,也有很多月经贴,比如对资源库的操作应该放在领域服务还是领域 ...

  3. Consider the following: If you want an embedded database (H2, HSQL or Der...

    这个坑把java进程干掉就可以了,因为占用了 Description: Failed to configure a DataSource: 'url' attribute is not specifi ...

  4. 03 .NET CORE 2.2 使用OCELOT -- Docker中的Consul

    部署consul-docker镜像 先搜索consul的docker镜像 docker search consul 然后选择了第一个,也就是官方镜像 下载镜像 docker pull consul 然 ...

  5. Bootstrap4后台导航栏制作

    <!Doctype html> <html lang="zh-cn"> <head> <!-- Required meta tags -- ...

  6. MyCat教程三：安装及配置介绍

    一.安装MyCat 1.安装准备环境 1.1 安装JDK   因为MyCat是java开发的,所以需要java虚拟机环境,在Linux节点中安装JDK是必须的. 1.2 放开相关端口   在主从节点上 ...

  7. 利用DNS日志进行MySQL盲注

    0x01 技术原理 这里是利用load_file这个函数利用smb请求方式请求域名机器下的一个文件,由于计算机对该域名不熟悉所以需要优先请求DNS,所以我们通过DNS日志记录中的内容来获取回显.解决了 ...

  8. 国内不fq安装K8S三: 使用helm安装kubernet-dashboard

    目录 3 使用helm安装kubernet-dashboard 3.1 Helm的安装 3.2 使用Helm部署Nginx Ingress 3.3 使用Helm部署dashboard 3.4 使用He ...

  9. Traefik HTTPS 配置

    参考 add-a-tls-certificate-to-the-ingress Entry Points Definition 使用traefik作为ingress controller透出集群中的h ...

  10. pycharm与github的使用

    1.clone代码: 输入github的存储库地址,输入本地存储目录,点击clone即可: 2.上传代码: 输入存储库名字,点击share即可:github上就会有你分享的代码啦