点开查看代码

<!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 验证用户名、密码

    1. 数据库操作 2.验证用户 2.1. 查询 String sql = String.format("select count(*) from user where name='%s' a ...

  2. PHP 中使用socket

    一.开启socket phpinfo();查看是否开启了socket扩展,否则在php.ini中开启. 二.服务器端代码的写法 <?php error_reporting(E_ALL); set ...

  3. 查找子字符串----KMP算法深入剖析

    假设主串:a b a b c a b c a c b a b      子串:a b c a c 1.一般匹配算法 逐个字符的比较,匹配过程如下: 第一趟匹配 a b a b c a b c a c ...

  4. java UUID的创建

    java UUID的创建: 参考:http://blog.csdn.net/yaerfeng/article/details/7070369 可以研究一下最后的一段代码: http://spiritf ...

  5. POJ2479(dp)

    Maximum sum Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 39089   Accepted: 12221 Des ...

  6. HDU5835

    Danganronpa Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  7. 【puthon基础】之str类字符串

    str类字符串是不可变对象 1.创建字符串 s1 = str() #创建一个空字符串 s2 = str("hello") #创建字符串"hello" 2.处理字 ...

  8. GreenOpenPaint的实现（一）基本框架

    Win7下的MSPaint是Ribbon的典型运行.这种SDI程序对于图像处理来说是很适合的.利用春节时间,基于之前的积累,我实现GreenOpenPaint,主要就是模拟MSPaint的界面,实现出 ...

  9. Objective-c runtime方法替换引发的死循环

    在OC中: API: class_addMethod往一个Class里添加method API: class_getInstanceMethod或class_getClassMethod可以判断某个S ...

  10. Java中boolean类型到底占用多少字节

    虽然 Java 虚拟机定义了 boolean 这种数据类型,但是只对它提供了非常有限的支持.在 Java 虚拟机中没有任何供 boolean 值专用的字节码指令,在 Java 语言之中涉及到 bool ...