react.js 测试
<html>
<head>
<title>hellow</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<meta charset="utf-8" />
</head>
<body>
<div id="root">
</div>
<script type="text/jsx">
//创建组建
var TestButtonComponent = React.createClass({
handleClick:function(event){
var tipsE = React.findDOMNode(this.refs.tips);
if(tipsE.style.display === 'none'){
tipsE.style.display = 'inline';
}else{
tipsE.style.display = 'none';
}
event.stopPropagation(); //阻止事件冒泡
event.preventDefault(); //阻止默认事件
},
render:function(){
return (
<div>
<button onClick={this.handleClick}>显示|隐藏</button><span ref="tips">测试button</span>
</div>);
}
});
var TestInputComponent = React.createClass({
getInitialState:function(){
return {
inputContent:'ii'
};
},
handleChange:function(event){
this.setState({
inputContent:event.target.value
});
},
render:function(){
return (
<div>
<input type="text" onChange={this.handleChange} /> <span>{this.state.inputContent}</span>
</div>
);
}
});
//调用组建
React.render(
<div>
<TestButtonComponent />
<br/> <br/>
<br/>
<TestInputComponent />
</div>,
document.getElementById('root')
);
</script>
</body>
<html>
react.js 测试的更多相关文章
- react.js 各种小测试笔记
首先看一个 基础html 至于其中的 js 问价大家去官网下载就好了. <html> <head> <script src="../build/react.j ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- React.js深入学习详细解析
今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定 ...
- React.js入门必须知道的那些事
首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性 ...
- React.js 官网入门教程 分离文件 操作无法正常显示HelloWord
对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html><ht ...
- 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍
使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 来自译者 markzhai:大家也知道最近 ...
- React JS 基础知识17条
1. 基础实例 <!DOCTYPE html> <html> <head> <script src="../build/react.js" ...
- 谈谈 React.js 的核心入门知识
近来React.js变得越来越流行,本文就来谈一谈React.js的入门实践,通过分析一些常用的概念,以及提供一些入门 的最佳编程编程方式,仅供参考. 首先需要搞懂的是,React并不是一个框架,Re ...
- 当今流行的 React.js 适用于怎样的 Web App?
外村 和仁(株式会社 ピクセルグリッド) React.js是什么? React.js是Facebook开发的框架. http://facebook.github.io/react/ 官网上的描述是「 ...
随机推荐
- 从VMware虚拟机安装到hadoop集群环境配置详细说明(第一期)
http://blog.csdn.net/whaoxysh/article/details/17755555 虚拟机安装 我安装的虚拟机版本是VMware Workstation 8.04,自己电脑上 ...
- 【图片识别】java 图片文字识别 ocr (转)
http://www.cnblogs.com/inkflower/p/6642264.html 最近在开发的时候需要识别图片中的一些文字,网上找了相关资料之后,发现google有一个离线的工具,以下为 ...
- Flask刷新问题
修改页面中内容,特别是图片后,总是刷新不了.调试时,我常常通过修改端口来解决,从80-99不断改. 服务器部署,也遇到同样问题,重启web服务器,重启计算机都不行,网页已经改过来了,但是图片还是老图片 ...
- 一个WEB应用的开发流程
转载:http://www.51testing.com/html/56/n-3721856.html 先说项目开发过程中团队人员的分工协作. 一.人员安排 毕业至今的大部分项目都是独立完成,虽然也有和 ...
- Python代码规范(PEP8)问题及解决
转载:https://blog.csdn.net/Jason_Lewis/article/details/75386598 最近刚刚接触Python,为了养成好习惯,尽量保证自己写的代码符合PEP8代 ...
- SuperMap iDesktop之导入数据
SuperMap作为一个平台软件有自己的数据格式,现要将ESRI的SHP数据导入到SuperMap的udb数据库中,可以完成导入,但也不得不说几点问题. 下面是ArcGIS中批量导入SHP的操作界面. ...
- iOS 一个开发者账号 多台Mac 共用
iOS 开发者账号有时候需要多台Mac 一起用.这个时候就得要证书了, 首先如果一个账号能在第一台电脑上能正常使用了.那么这时就可以把相应的证书导出来,再台PC的时候也可以用. 先导私有的证书.这个是 ...
- Android 之 沉浸式状态栏及顶部状态栏背景色设置
现在很多应用都引用了沉浸式状态栏,如QQ,效果下图: 效果很酷炫,其实设置也很简单.但是,需要注意的是,这种效果只能在API19以及以上版本中才能够做到. 方法一: 首先,如果想让界面Activity ...
- HTTP长连接与短链接
想要充分了解HTTP长连接,需要首先知道一些基本概念: TCP连接 当网络通信时采用TCP协议时,在真正的读写操作之前,server与client之间必须建立一个连接,当读写操作完成后,双方不再需要这 ...
- MapReduce实现大矩阵乘法
来自:http://blog.csdn.net/xyilu/article/details/9066973 引言 何 为大矩阵?Excel.SPSS,甚至SAS处理不了或者处理起来非常困难,需要设计巧 ...