点开查看代码

<!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. Java 读写Properties配置文件

    Java 读写Properties配置文件 JAVA操作properties文件 1.Properties类与Properties配置文件 Properties类继承自Hashtable类并且实现了M ...

  2. SQL Server @@ERROR 用法

    @@error是系统函数,当没有发生错误时返回0,如果发生错误时@@error<>0,并返回错误号,每个SQL语句执行完,@@error值都会变. @@error只记录当前错误,如果存储过 ...

  3. 只为粗暴看一下ES6的字符串模板的性能

    网上查找"ES6 字符串模板 +性能"5分钟无果遂写了一个暴力测试. 测试对象: +=方式,字符串累加计算方式 +s1+s2...+sn方式,即传统连加拼接字符串方式 s.push ...

  4. 《JAVASCRIPT高级程序设计》节点层次和DOM操作技术

    DOM可以将任何HTML和XML文档描绘成一个由多层次节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息,每种类型都继承与Node接口,因此都共同享有一些属性和方法,同时,也拥有 ...

  5. js精要之函数

    数组排序 ,,,,,]; arr.sort(function(a,b){ return a-b; }); console.log(arr); arguments 参数存储对象 function ref ...

  6. javascript设计模式与开发实践阅读笔记（11）—— 模板方法模式

    模板方法模式: 由两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子类.通常在抽象父类中封装了子类的算法框架,包括实现一些公共方法以及封装子类中所有方法的执行顺序.子类通过继承这个抽象类,也继 ...

  7. MVC - 云服务器部署

    本章将和大家分享的是如果在云服务器上部署mvc,云服务器部署其实也不高大上,就和咋们在自己电脑上用iis发布部署站点一样,只是需要使用云解析把自己购买的域名解析到对应的自己的云服务器上,这些都是用的云 ...

  8. 【.Net Framework 体积大？】不安装.net framework 也能运行！？原理简介-2

    接上一篇 [.Net Framework 体积大?]不安装.net framework 也能运行!?开篇叙述-1 昨天写了一个引子,还是有读者对这套“小把戏”感兴趣.那么不辜负大家的希望,争取博主不做 ...

  9. JAVA日常练习—程序输入string转化为int并求和

    实验结果如图:

  10. 基于Spring DM管理的Bundle获取Spring上下文对象及指定Bean对象

    在讲述服务注册与引用的随笔中,有提到context.getServiceReferences()方法,通过该方法可以获取到OSGI框架容器中的指定类型的服务引用,从而获取到对应的服务对象.同时该方法还 ...