React组件开发经典案例--todolist
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>todolist2</title>
<link rel="stylesheet" href="">
<script type="text/javascript" src="../build/react.js"></script>
<script type="text/javascript" src="../build/react-dom.js"></script>
<script type="text/javascript" src="../build/browser.min.js"></script>
</head>
<body>
<div id="box"> </div>
<script type="text/babel">
var Todolist=React.createClass({
//初始化状态
getInitialState:function(){
return({
collection:[]})
},
render:function(){
return(
<div>
<input type="text" name="" ref="yzxText"/>
<input type="button" name="" value="add" onClick={this.handleClick}/>
<List items={this.state.collection} delEvent={this.DelClick}>
</List>
</div> )
},
handleClick:function(){
this.state.collection.push(this.refs.yzxText.value);
this.setState({
collection: this.state.collection
})
},
DelClick:function(index){
this.state.collection.splice(index,1);
this.setState({
collection: this.state.collection
})
}
});
var List=React.createClass({
render:function(){
var _this=this;
return(
<ul>
{
this.props.items.map(function(item,index){
return <li key={index}>{item}
<input type="button" name="" value="del" onClick={
_this.handleDelclick.bind(_this,index)}/>
</li>
})
}
</ul> )
},
handleDelclick:function(index){
this.props.delEvent(index);
}
})
ReactDOM.render(<Todolist></Todolist>,document.getElementById('box'));
</script>
</body>
</html>
*此案例重点在React的父子组件之间数据的传递。
*父组件影响子组件时，通常通过设置状态，子组件设置一个属性来接收这一状态的值。
*子组件要影响父组件时,通过改变自身属性（这里的属性值为一个函数，这样就和父组件产生了联系），这个函数里给父组件设置新的状态的值。
*在动态获取数据渲染dom时，通常需要通过map映射数组，return结果，这个结果通常就是我们需要映射出的节点。这里this指向是window,而不是组件本身,所以通常需要在渲染时先保存this。
*要获取事件的索引值并对一个函数传参但不执行这个函数时，在方法名后.bind(_this,index)来改变this的指向并且给函数传入index参数。
React组件开发经典案例--todolist的更多相关文章
- React组件开发入门
React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...
- React组件开发（一）初识React
*React不属于MVC.MVVM,只是单纯的V层. *React核心是组件(提高代码复用率.降低测试难度.代码复杂度). *自动dom操作,状态对应内容. *React核心js文件:react.js ...
- wn-cli 像React组件开发一样来开发微信小程序
项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...
- react组件开发规范（一）
这是通过修改项目运行在Google上时的警告,总结的的部分react组件开发规范: (1)编写组件时,一定要写PropTypes,切莫为了省事儿而不写! 如果一个Props不是required,一定在 ...
- jquery插件模式开发和react组件开发之间的异同
jquery插件模式开发和react组件开发之间的异同
- react复习总结（1）--react组件开发基础
这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...
- React 组件开发注意事项
0.state的设定原则,如果render里用不到,则就不应该是一个state. 1.数组遍历时,用每一条数据的唯一标识作为key,尽量不要使用遍历的索引值作为key,如果它们从不重新排序,它们工作也 ...
- js--基于面向对象的组件开发及案例
组件的开发:多组对象之间想兄弟关系一样,代码复用的形式. 问题:1).参数不写会报错:利用对象复制————配置参数和默认惨啊书的覆盖关系(逻辑或也可以)2).参数特别多时会出现顺序问题:json解决 ...
- React组件开发
目录: 属性:props 内联样式 状态记忆 : state 生命周期 访问DOM 表单输入 承接快速入门篇:http://www.cnblogs.com/jasonnode/p/4444504.ht ...
随机推荐
- jQuery按键事件响应的Demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Java中的封装、继承、多态
封装 在如何理解面向对象这篇文章中,提到所谓的封装就是"功能都给你做好了,你不必去理解它是怎么写出来的,直接使用即可.".但你得清楚一点,那就是这句话是相对于使用者来说的,而作为开 ...
- 浅谈Socket长连+多线程[原创，欢迎指点]
前戏 [PS:原文手打,转载说明出处] [PS:博主自认为适用于云平台设备管控,且适用于IM主控] 好久没来了,13年时还想着多写一些博客,这都17年过年,年前也写一写Scoket+多线程,不足之处, ...
- Hadoop权威指南:压缩
Hadoop权威指南:压缩 [TOC] 文件压缩的两个好处: 减少储存文件所需要的磁盘空间 加速数据在网络和磁盘上的传输 压缩格式总结: 压缩格式 工具 算法 文件扩展名 是否可切分 DEFLATE ...
- MySQL插入数据中文乱码问题的解决
一.使用语句 show variables like 'character%'; 来查看当前数据库的相关编码集. 1.启动cmd,登录mysql ①cd C:\Program Files\MySQL\ ...
- 关于Node.js后端架构的一点后知后觉
前言 上周有幸和淘宝前端团队的七念老师做了一些NodeJS方面上的交流(实际情况其实是他电话面试了我╮(╯-╰)╭),我们主要聊到了我参与维护的一个线上NodeJS服务,关于它的现状和当下的不足.他向 ...
- .Net程序员学用Oracle系列(12)：增删改查
1.插入语句 1.1.INSERT 1.2.INSERT ALL 2.删除语句 2.1.DELETE 2.2.TRUNCATE 3.更新语句 3.1.UPDATE 3.2.带子查询的 UPDATE 3 ...
- Quartz_理解1
一.引言 quratz是目前最为成熟,使用最广泛的java任务调度框架,功能强大配置灵活.在企业应用中占重要地位.quratz在集群环境中的使用方式是每个企业级系统都要考虑的问题.早在2006年,在I ...
- App开发外包必须注意的四大骗局
在app外包过程中有很多需要注意的事项,今天专门挑选注意事项中的"骗局"这个话题来与大家分享一些的常见骗局及其细节. 无论是从新闻还是身边的朋友,我们都经常可以听见"xx ...
- tomcat的配置
配置tomcat需要 先下载JDK JDE配置环境http://jingyan.baidu.com/article/870c6fc33e62bcb03fe4be90.htmlXML配置 路径——> ...