点开查看代码

<!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的更多相关文章

  1. React组件开发入门

    React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...

  2. React组件开发（一）初识React

    *React不属于MVC.MVVM,只是单纯的V层. *React核心是组件(提高代码复用率.降低测试难度.代码复杂度). *自动dom操作,状态对应内容. *React核心js文件:react.js ...

  3. wn-cli 像React组件开发一样来开发微信小程序

    项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...

  4. react组件开发规范（一）

    这是通过修改项目运行在Google上时的警告,总结的的部分react组件开发规范: (1)编写组件时,一定要写PropTypes,切莫为了省事儿而不写! 如果一个Props不是required,一定在 ...

  5. jquery插件模式开发和react组件开发之间的异同

    jquery插件模式开发和react组件开发之间的异同

  6. react复习总结（1）--react组件开发基础

    这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...

  7. React 组件开发注意事项

    0.state的设定原则,如果render里用不到,则就不应该是一个state. 1.数组遍历时,用每一条数据的唯一标识作为key,尽量不要使用遍历的索引值作为key,如果它们从不重新排序,它们工作也 ...

  8. js--基于面向对象的组件开发及案例

    组件的开发:多组对象之间想兄弟关系一样,代码复用的形式. 问题:1).参数不写会报错:利用对象复制————配置参数和默认惨啊书的覆盖关系(逻辑或也可以)2).参数特别多时会出现顺序问题:json解决 ...

  9. React组件开发

    目录: 属性:props 内联样式 状态记忆 : state 生命周期 访问DOM 表单输入 承接快速入门篇:http://www.cnblogs.com/jasonnode/p/4444504.ht ...

随机推荐

  1. Struts2文件的上传

    一.单文件的上传  表单的enctype属性: application/x-www-form-urlencoded:默认的编码方式. multipart/form-data:会以二进制的方式处理表单数 ...

  2. Delphi实例之一个较复杂的记事本的实现

    http://www.mamicode.com/info-detail-110813.html delphi中控件位置及自动排版的问题 http://blog.csdn.net/avan_lau/ar ...

  3. MySQL ibdata多路径扩容

    vi /etc/my.cnf innodb_data_home_dir = innodb_data_file_path= /data/mysql/ibdata1:10M:autoextend(为目前i ...

  4. SLS评测报告

    什么是SLS?  简单日志服务(Simple Log Service,简称SLS)是针对日志收集.存储.查询和分析的服务.用户只需简单地配置日志产生的位置和格式等信息,就能实时查询海量日志,并可通过S ...

  5. Flex之HTML5视频播放解决方案

    Flex的video类对于视频播放在ios操作系统下表现出不兼容,采用调用ios源生播放器的思路,那么怎么调呢? 话说Html5 和Flex是竞争关系,这次利用Html5的video标签实现ios播放 ...

  6. 支付宝 Android 版使用的开源组件

    支付宝 Android 版使用的开源组件 前言: 花了点时间整理了 支付宝 Android 客户端使用的开源组件,给需要的同学.在你不知道用什么开源框架的时候可以作下参考,毕竟支付宝是阿里的重量级产品 ...

  7. ubuntu开机自动关闭独显，使用集成显卡

    我的本子是联想y470p-ise,因为是有双显卡,而ubuntu在开机后,双显卡默认是同时工作,会产生巨大的发热,导致很不爽.而且在ubuntu下基本我也不用独显,所以有开机关闭独显的需求. ubun ...

  8. Professional C# 6 and .NET Core 1.0 - What’s New in C# 6

    本文为转载,学习研究 What's New in C# 6 With C# 6 a new C# compiler is available. It's not only that a source ...

  9. 百叶窗特效（用move.js库）

    每逢佳节胖三斤啊,胖了胖了,加上每天坐在电脑前,现在还和一个智障聊天,后天去苏州玩的事情,住哪里啊?去哪里嘿嘿嘿啊? 苏州,找了下,攻略,听说一定要去园林看,听说很牛逼,好吧,陶冶一下我的情操.今天操 ...

  10. cmake工具链

    命令project() enable_language()try_compile() 变量CMAKE_<LANG>_COMPILERCMAKE_<LANG>_COMPILER_ ...