React.js入门小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel"> var HelloMessage=React.createClass({
getInitialState:function(){
return {value:'TTTK'};
},
handleChange:function(event){
this.setState({value:event.target.value});
},
render:function(){
var value=this.state.value;
return(
<div>
<Content myDataProp={value} updateStateProp={this.handleChange}></Content>
</div>
);
},
});
var Content=React.createClass({
render:function(){
return(
<div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp}/>
<h4>{this.props.myDataProp}</h4>
</div>
);
},
});
ReactDOM.render(
<HelloMessage/>,
document.getElementById("example")
);
</script>
</body>
</html>
react.js小案例（input框值变，对应变）
React.js入门小案例的更多相关文章
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- 02SpringMvc_springmvc快速入门小案例（XML版本）
这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:
- spring boot入门小案例
spring boot 入门小案例搭建 (1) 在Eclipse中新建一个maven project项目,目录结构如下所示: cn.com.rxyb中存放spring boot的启动类,applica ...
- React.js 入门与实战课程思维导图
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考. 原文发表于我的技术博客 此导图为课程 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- Hibernate的介绍及入门小案例
1.Hibernate的诞生 在以前使用传统的JDBC开发应用系统时,如果是小型应用系统,并不觉得有什么麻烦,但是对于大型应用系统的开发,使用JDBC就会显得力不从心,例如对几十,几百张包含几十个字段 ...
- React.js - 入门
React.js - 第1天 1. React简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 ...
- React.js入门笔记(再续)：评论框的实现
本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=&q ...
- 前端框架React Js入门教程【精】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
随机推荐
- UITextField属性
0. enablesReturnKeyAutomatically 默认为No,如果设置为Yes,文本框中没有输入任何字符的话,右下角的返回按钮是disabled的. 1.borderStyl ...
- 理解v$sql的exact_matching_signature与force_matching_signature
理解v$sql的exact_matching_signature与force_matching_signature 对SQL语句,去掉重复的空格(不包括字符常量),将大小写转换成相同,比如均为大写(不 ...
- Windows平台注册mysql服务
将mysql 注册为服务: ->mysqld --install 卸载服务: ->mysqld --remove 命令行启动mysql: ->net start mysql 命令行关 ...
- DNS域名解析
之前用的是DNSPOD.CN的解析,没什么问题. 因为想根据不同国家做服务器解析(欧洲,亚洲,美国) 然后就转到DNSPOD.com里面有按国家来分的. 但是欧洲那边反应,每天断断续续会不能访问网站. ...
- iOS6：在你的企业系统中支持Passbook
前言 这是一篇翻译,感谢Jonathan Tang. 原文地址:iOS 6 Tutorial: Supporting Passbook within Your Enterprise Systems 正 ...
- 刷新本地的DNS缓存
用“WIN +R”快捷键打开运行窗口,输入“cmd”命令,进行命令行窗口.
- java中HashSet详解（转）
HashSet 的实现 对于 HashSet 而言,它是基于 HashMap 实现的,HashSet 底层采用 HashMap 来保存所有元素,因此 HashSet 的实现比较简单,查看 HashSe ...
- linux下gcc默认搜索头文件及库文件的路径
一.头文件gcc 在编译时如何去寻找所需要的头文件:※所以header file的搜寻会从-I开始※然后找gcc的环境变量 C_INCLUDE_PATH,CPLUS_INCLUDE_PATH,OBJC ...
- [reprint]如何编写引导程序 Hello World
在存储介质(硬盘.软盘.光盘)中有一块特殊的区域,叫做引导区.在计算机启动后,BIOS会读取引导区内的代码到内存中去,然后将执行这些代码.引导区的位置和大小与计算机的平台有关,对于IBM-PC兼容机, ...
- 小项目：mini资源管理器【使用IO流：包含(Directory与DirectoryInfo、File与FileInfo的用法）】
主界面是这样的 1.在点击查询引发的事件时把TextBox.Text输入的目录地址加载到TreeList控件里. private void btnSelect_Click(object sender, ...