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,表示全局安装.我们可以指定更新版本,只需要在后面填上@版本号即可,也可以输入@ ...
随机推荐
- 20155203 实验四《 Android程序设计》实验报告
一.实验内容 实验项目一:Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for Android 2nd)>第二十 ...
- 20155222卢梓杰 《Java程序设计》第1周学习总结
20155222 <Java程序设计>第1周学习总结 教材学习内容总结 JDK是一个工具程序,包括了JAVA程序语言,工具程序与JRE,JRE包括了部署技术,JAVA SE API 与 J ...
- 20155321 2016-2017-2 《Java程序设计》第二周学习总结
教材学习内容总结 这星期主要学习了Java语言中的各种运算符以及基本的一些语句,除了个别地方之外大部分和以往C语言学的东西比较相似,在比较中看教材学习比较容易掌握第三章的内容,课后练习的难度也不是很大 ...
- CF 1065 E. Side Transmutations
E. Side Transmutations http://codeforces.com/contest/1065/problem/E 题意: 长度为n的字符串,字符集为A,问多少不同的字符串.两个字 ...
- Android开发笔记——视频录制播放常见问题
本文分享自己在视频录制播放过程中遇到的一些问题,主要包括: 视频录制流程 视频预览及SurfaceHolder 视频清晰度及文件大小 视频文件旋转 一.视频录制流程 以微信为例,其录制触发为按下(住) ...
- vue-cli的安装使用
通过 npm install vue 安装vue 后: 1.打开cmd 输入 npm install --global vue-cli 全局安装vue-cli脚手架 输入 vue -V 返回vue-c ...
- Vue 编程之路(一)——父子组件之间的数据传递
最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型.其中部分页面是数据管理页,所以有很多可以复用的表格,故引入自定义组件.在这里分享一下开 ...
- CMDBuild2.4.3安装配置
参考文档: 官网:http://www.cmdbuild.org/en 参考:http://blog.csdn.net/shawn210/article/details/70230248 本文涉及CM ...
- while read读取文本内容
读取文件给 while 循环 方式一: exec <FILE while read line do cmd done 方式二: cat FILE_PATH |while read line do ...
- linux下svn操作(专)
原文地址:https://www.cnblogs.com/clicli/p/5913330.html svn命令在linux下的使用SVN软件版本管理 1.将文件checkout到本地目录svn ch ...