React.js学习笔记(一):组件协同与mixin
组件协同:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>父子关系</title>
</head>
<body>
<script src="react.js"></script>
<script src="JSXTransformer.js"></script>
<script type="text/jsx">
var GenderSelect = React.createClass({
render: function() {
return <select onChange={this.props.handleSelect}>
<option value="0">男</option>
<option value="1">女</option>
</select>
}
}); var SignUpForm = React.createClass({
getInitialState:function(){
return {
name:"",
password:"",
gender:""
}
},
handleChange:function(name,event){
var newState = {};
newState[name] = event.target.value;
this.setState(newState);
},
handleSelect: function (event) {
this.setState({gender: event.target.value})
},
render: function () {
console.log(this.state);
return <form>
<input type="text" placeholder="请输入用户名" onChange = {this.handleChange.bind(this,'name')}/>
<input type="password" placeholder="请输入密码" onChange = {this.handleChange.bind(this,'password')}/>
<GenderSelect handleSelect={this.handleSelect}></GenderSelect>
</form>
}
});
React.render(<SignUpForm></SignUpForm>,document.body);
</script>
</body>
</html>
mixin:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Mixin</title>
</head>
<body>
<script src="react.js"></script>
<script src="JSXTransformer.js"></script>
<script type="text/jsx">
var BindingMixIn = {
handleChange: function (key) {
var that = this;
return function(event){
var newState = {};
newState[key] = event.target.value;
that.setState(newState);
}
}
};
var BindingExample = React.createClass({
mixins:[BindingMixIn],
getInitialState: function () {
return {
text: '',
comment:''
}
}, render: function () {
return <div>
<input type="text" placeholder="请输入内容" onChange={this.handleChange('text')}/>
<textarea placeholder="请输入内容" onChange={this.handleChange('comment')}></textarea>
<p>{this.state.text}</p>
<p>{this.state.comment}</p> </div>
}
})
React.render(<BindingExample></BindingExample>, document.body)
</script>
</body>
</html>
React.js学习笔记(一):组件协同与mixin的更多相关文章
- React.js 学习笔记
React.js React.js 是时下最流行的前端 JavaScript 框架之一. 创建工程 # 安装 CLI $ npm install -g create-react-app # 创建新的应 ...
- Vue.js学习笔记--4. 组件的基本使用
整理自官网教程 -- https://cn.vuejs.org/ 1. 所有Vue组件同时也都是Vue实例,分为全局组件和局部组件,注册方式如下. <div id="app" ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- The Road to learn React书籍学习笔记(第三章)
The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...
- React Native 学习笔记--进阶(二)--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- React 入门学习笔记整理目录
React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...
- The Road to learn React书籍学习笔记(第二章)
The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...
- 【转】Backbone.js学习笔记(二)细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- Node.js学习笔记(3):NPM简明教程
Node.js学习笔记(3):NPM简明教程 NPM常用操作 更新NPM版本 npm install npm -g -g,表示全局安装.我们可以指定更新版本,只需要在后面填上@版本号即可,也可以输入@ ...
随机推荐
- Simulating Mouse Events in JavaScript
http://marcgrabanski.com/simulating-mouse-click-events-in-javascript/
- React 组件间通信
https://jsfiddle.net/69z2wepo/9719/ <script src="https://facebook.github.io/react/js/jsfiddl ...
- 20155216 2016-2017-2《Java程序设计》课程总结
20155216 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 预备作业1:简要内容:我对师生关系的见解 预备作业2:简要内容:有关C语言学习调查以及学习 ...
- 20155227 《Java程序设计》实验四 Android开发基础设计实验报告
20155227 <Java程序设计>实验四 Android开发基础设计实验报告 任务一 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二 ...
- 20155302 实验三 敏捷开发与XP实践
20155302 实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验内容及步骤 (一)编码标准 在IDEA中使用工具(Code->Reformate Code)把代码重 ...
- ruby学习笔记(2)-chomp,chop的区别
还没开始系统性的学习Ruby,最近在看metasploit框架的exploit会涉及到Ruby脚本,也就硬着头皮一遍查阅资料一遍做些笔记吧. Ruby字符串中存在chop和chomp的内置函数.我在h ...
- JDK核心源码
一.核心包有哪些? Jdk的包中,除开了lang包下面的类,用得最多的应该要属于util包下面的类了, 本篇文章主要针对Jdk的util包下面的类(util目录下面的类,暂时不包括util 包下面的子 ...
- 洛谷 P1941 飞扬的小鸟
洛谷 P1941 飞扬的小鸟 原题链接 首先吐槽几句 noip都快到了,我还不刷起联赛大水题! 题目描述 Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节 ...
- animation和transition
相同点 指定要侦听更改的CSS属性. 设置计时(缓和)功能以改变从一个属性值到另一个属性值的速率 指定持续时间以控制动画或转换所需的时间 以编程方式收听您可以随意执行的动画和特定于转换的事件 可视化C ...
- linux-ubuntu配置通过22端口远程连接
当安装好ubuntu后获取到对应主机的ip地址,要想通过类似xshell这样的远程连接工具连接到ubuntu主机,需要在你刚刚安装好的ubuntu主机上安装openssh这个软件,才能通过远程来连接u ...