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)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
随机推荐
- C#实现根据IP 查找真实地址
IPScanner.cs public class IPScanner { private byte[] data; Regex regex = new Regex(@"(((\d{1,2} ...
- Eureka的故事，专注能让你看到别人看不到的事情
有这么一句古老的箴言: 如果你手里有一把锤子,所有东西看上去都像钉子. 其实这句话已经是老调中的老调重弹了,我们程序员有很多锤子:OO.设计模式.语言(C, C++, Java, Python, Ru ...
- Winform禁止容器内控件获得焦点时改变容器显示范围坐标
在Winform中当容器的可视高度无法显示所有控件并且容器的AutoScroll属性设置为True的情况下,但点击容器内某个未显示完整的控件时,会出现容器的滚动条自动下滚的情况. 这是由于控件获得焦点 ...
- codeforces 520 Pangram
http://codeforces.com/problemset/problem/520/A A. Pangram time limit per test 2 seconds memory limit ...
- Java基础（42）：Java中主类中定义方法加static和不加static的区别（前者可以省略类名直接在主方法调用，后者必须先实例化后用实例调用）
package lsg.ap.april4th2; /* 知识点:1.Getter and Setter 的应用 2.局部变量与成员变量(也可叫做全局变量) 3.Static关键字的用法 a.成员变量 ...
- C++初学者 const使用详解
关于C++中的const关键字的用法非常灵活,而使用const将大大改善程序的健壮性,参考了康建东兄的const使用详解一文,对其中进行了一些补充,写下了本文. 1. const常量 如: cons ...
- bzoj4137 [FJOI2015]火星商店问题
比较容易想到的做法是线段树套字典树,修改操作时在字典树上经过的节点维护一个最近被访问过的时间,这样询问操作只经过满足时间条件的节点,时间复杂度O(NlogN^2)但是因为线段树每个节点都要套个字典树, ...
- JSP 中 forward 和 redirect 的区别_2014.12.31
重定向,只能访问工程下(WebRoot文件夹)的页面,不能访问到内部(WEB_INF文件夹)的页面 1.从地址栏显示来说:forward浏览器显示路径不变,redirect浏览器显示路径改变forwa ...
- geotools
http://blog.tigerlihao.cn/2010/01/geotools-based-web-map-service.html
- paper 78：sniff抓包程序片段
#define INTERFACE "eth0"#define MAX_SIZE 65535 int init_raw_socket();int open_promisc(char ...