点开查看代码

<!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. php判断IE浏览器

    <?php/** * 检测用户当前浏览器 * @return boolean 是否ie浏览器 */ function chk_ie_browser() { $userbrowser = $_SE ...

  2. MapReduce深度分析(二)

    MapReduce深度分析(二) 五.JobTracker分析 JobTracker是hadoop的重要的后台守护进程之一,主要的功能是管理任务调度.管理TaskTracker.监控作业执行.运行作业 ...

  3. hadoop学习笔记--集群搭建

    注:大家常说的ssh其实就是一个免密码访问的东西,为了简化操作的,不用每次访问其他节点重新输入密码.但是要想配置如下: .在每台机器上执行 ssh-keygen -t rsa,连敲三次回车键(即设置空 ...

  4. 修改GitHub上项目语言显示的问题

    问题 最近将自己写的博客放到github上了.由于使用了富文本编辑器.jQuery.Bootstrap等第三方插件,导致js.css等代码远远超过你自己写的代码. 于是也就成这样了 而且这里也显示Ja ...

  5. Flash Socket通信的安全策略问题 843端口

    1.问题描述       将flash发布为html格式后,加载页面后,swf无法与服务器进行socket通信.Flash端显示的错误为:securityErrorHandler信息: [Securi ...

  6. SQL查询根节点

    /* 标题:查询指定节点及其所有父节点的函数 作者:爱新觉罗.毓华(十八年风雨,守得冰山雪莲花开) 时间:2008-05-12 地点:广东深圳 */ create table tb(id varcha ...

  7. 排查问题所用到的一些Linux命令实践（不定期更新。。）

    一.前言 线上问题排查可能是每个程序员都会经历的.在排查的过程中,往往会用到很多Linux命令,也会产生一些很实用的技巧.本博文通过分析一次线上问题排查的过程,把所有用到的命令串起来.每个Linux命 ...

  8. Excel实用知识3

    纯手打,可能有错别字,使用的版本是office2013 转载请注明出处 http://www.cnblogs.com/hnnydxgjj/p/6343914.html ,谢谢 数据透视表 数据透视表是 ...

  9. Android仿微信朋友圈，全文收起功能，附源码

    在众多的社交类软件中,朋友圈是必不可少的,可以与好友.同学等分享自己的日常和有意思的事情,在开发社交类App时,朋友圈发表的内容你不可能让他全部显示,全部显示的话用户体验度会非常不好,这时就要用到全文 ...

  10. Oracle数据库语言修改成UTF-8

    select * from v$nls_parameters; sqlplus "/ as sysdba" SQL> SHUTDOWN IMMEDIATE SQL> S ...