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/ 官网上的描述是「 ...
随机推荐
- Spring中的代理模式
代理模式 所谓代理,就是一个人或者一个机构代表另一个人或者另一个机构采取行动.在一些情况下,一个客户不想或者不能够直接引用一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 代理模式是一种 ...
- [Functional Programming + React] Provide a reasonable default value for mapStateToProps in case initial state is undefined
For example we have a component, it needs to call 'react-redux' connect function. import { compose, ...
- codeforces 551 C GukiZ hates Boxes
--睡太晚了. ..脑子就傻了-- 这个题想的时候并没有想到该这样-- 题意大概是有n堆箱子从左往右依次排列,每堆ai个箱子,有m个人,最開始都站在第一个箱子的左边, 每个人在每一秒钟都必须做出两种选 ...
- JS构造函数内的方法与构造函数prototype属性上方法的对比
本文的目的是让大家理解什么情况下把函数的方法写在JavaScript的构造函数上,什么时候把方法写在函数的 prototype 属性上;以及这样做的好处. 为了阅读方便,我们约定一下:把方法写在构造函 ...
- 【python】使用py3-bencode打开torrent文件
没想到这个原始版本访问量超过了后继版本,估计有些流量是搜索引擎带来的,有些人并不会点击左边“我的随笔”去找新的版本. 现把后继版本地址贴一下:http://www.cnblogs.com/xiande ...
- mysql insert 主键 重复问题
转自:http://blog.163.com/liuweiyoung@126/blog/static/173131045201222122732435/ mysql中insert into和repla ...
- ORACLE 执行计划
有关oracle 执行计划几个不错的连接 执行计划的一些概念介绍:http://database.51cto.com/art/200611/34273.htm执行计划的例子:http://www.or ...
- Elasticsearch - 理解字段分析过程(_analyze与_explain)
我们经常会遇到问题.为什么指定的文档没有被搜索到.许多情况下, 这都归因于映射的定义和分析例程配置存在问题. 针对分析过程的调试,ElasticSearch提供了专用的REST API. _analy ...
- 微信小程序 - (下拉)加载更多数据
注意和后端配合就行了,前端也只能把数据拼接起来! 无论是下拉加载还是加载更多,一样的道理! 注意首次加载传递参数 注意每次加载数据数 wxml <view class='table-rank'& ...
- Zabbix-Agent在主动模式启动服务后,提示no active checks on server [139.219.xx.xx:10051]: host [139.219.xx.xx] not found
一.解决方法