React 获取真实Dom v8.6.2版本
<!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版本的更多相关文章
- [react] 什么是虚拟dom?虚拟dom比操作原生dom要快吗?虚拟dom是如何转变成真实dom并渲染到页面的?
壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...
- React获得真实的DOM操作
真实的DOM操作 ------------------------------------------------------------------------------------------- ...
- React系列文章:无状态组件生成真实DOM结点
在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name ...
- React系列文章:JSX生成真实DOM结点
在上一篇文章中,我们介绍了Babel是如何将JSX代码编译成可执行代码的,随后也实现了一个自己的解析器,模拟了Babel编译的过程. 现在我们再来回顾一下,假定有如下业务代码: const style ...
- React: 有状态组件生成真实DOM结点
上次我们分析了无状态组件生成 DOM 的过程,无状态组件其实就是纯函数,它不维护内部的状态,只是根据外部输入,输出一份视图数据.而今天我们介绍的有状态组件,它有内部的状态,因此在组件的内部,可以自行对 ...
- React: 无状态组件生成真实DOM结点
在上一篇文章中,我们总结并模拟了 JSX 生成真实 DOM 结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({ ...
- React: JSX生成真实DOM结点
在上一篇文章中,我们介绍了 Babel 是如何将 JSX 代码编译成可执行代码的,随后也实现了一个自己的解析器,模拟了 Babel 编译的过程. 现在我们再来回顾一下,假定有如下业务代码: const ...
- react 的虚拟dom
前端优化的主要方面就是减少页面的DOM操作,减少重排和重绘,React在这方面做了优化,采用了所谓的虚拟DOM,其实我们平时也会遇到虚拟DOM,只是你没有注意罢了,请听我娓娓道来. 所谓的虚拟DOM ...
- react.js 获取真实的DOM节点
为了获取真实的dom节点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点. var MyComponent = React.crea ...
随机推荐
- log4j2记录日志到数据库(完美支持mysql使用DruidDataSource)
引用 log4j-core-2.12.1.jar log4j-web-2.12.1.jar 1:配置数据源 2:调用类 3:写入
- Unity3d—GUI能量条
1.打开Unity编辑器. 2.在脚本文件夹中添加C#脚本,我的是添加了skill_01这个脚本.(要自己设置文件夹,方便管理,不然文件添乱不方便管理) 3.注意,脚本的名字一旦确定就不要去改动,因为 ...
- css画三角形原理解析
<div id="div1"></div><div id="div2"></div><div id=&qu ...
- 我为什么学习Haskell
说起来,Haskell真是相当冷门而小众的一门语言.在我工作第一年的时候,我平时从网络的一些学习资料上时不时看到有人提到这门语言.那时候的认识就是除了我们平时用的“面向对象语言 (OOP: Objec ...
- 浅聊几种主流Docker网络的实现原理
原文:https://mp.weixin.qq.com/s/Jdxct8qHrBUtkUq-hnxSRw 参考:https://blog.csdn.net/yarntime/article/detai ...
- saltstack的简单搭建
环境; centos 7 192.168.10.10 master centos 7 192.168.10.129 minion 1.为了方便关闭防火墙 [root@local ...
- BindRequired and Required
[https://www.cnblogs.com/tdfblog/p/required-and-bindrequired-in-asp-net-core-mvc.html] Required:对值进行 ...
- Vue – 基础学习(4):事件修饰符
Vue – 基础学习(3):事件修饰符
- PHP上传图片基本代码示例
一.HTML代码如下: <form name="form2" method="post" action="?type=add" enc ...
- React学习笔记③
生命周期的理解 class App extends Component{ constructor(){ console.log("constructor") //初始化属于组件的属 ...