点开查看代码

<!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. --@angularJS--一个简单的UI-Router路由demo

    1.index.html: <!DOCTYPE HTML><html ng-app="routerApp"><head>    <titl ...

  2. 在web前端使用SVG

    前言: 花了些时间了解了一下svg,然而仍然不怎么了解... 第一步:直接在html代码中使用svg. 首先了解几个标签: <svg version="1.1" xmlns= ...

  3. HTML 表单和输入

    HTML 表单 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入内容,比如:文本域(textarea).下拉列表.单选框(radio-buttons).复选框(checkboxes)等等 ...

  4. js冒泡排序及计算其运行时间

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. python enhanced generator － coroutine

    本文主要介绍python中Enhanced generator即coroutine相关内容,包括基本语法.使用场景.注意事项,以及与其他语言协程实现的异同. enhanced generator 在上 ...

  6. ubuntu下php编译

    1.安装依赖 sudo apt-get install libjpeg-devsudo apt-get install libxml2-devsudo apt-get -y install libjp ...

  7. JavaScript 例题延迟10s 自动手动换图

    <style type="text/css"> * { margin:0px auto; padding:0px; font-family:"微软雅黑&quo ...

  8. [Bullet3]常见物体和初始化

    官方文档:http://bulletphysics.org 开源代码:https://github.com/bulletphysics/bullet3/releases API文档:http://bu ...

  9. MongoDB基础之七 用户管理

    MongoDB的用户管理 注意:A)在mongodb中,有一个admin数据库, 牵涉到服务器配置层面的操作,需要先切换到admin数据.即 use admin , -->相当于进入超级用户管理 ...

  10. arcpy.mapping常用四大件-MapDocument

    arcpy.mapping常用四大件-MapDocument by 李远祥 点开arcpy.mapping的帮助,可以看到其有限的几个类,看起来东西不是很多,但却是非常的使用.由于arcpy定位就是粗 ...