react demo todo list

Paste_Image.png

1.总体架构Main.js

import React from 'react';
import ReactDOM from 'react-dom';

import app from './app.js';
import Item from './item.jsx';


require('./css/index.css');
require('./css/base.css');

class Main extends React.Component{
    render(){

        var dataArr = this.props.dataArr;
        var content,footer,num=0;



        dataArr.reduce((n,item)=>{
            num = item.compile ? num : num+1;
        },0);


        if(dataArr.length !== 0){
            content = 

                            
                            

                                {
                                    dataArr.map(function(item,index){
                                        return 
                                    }.bind(this))
                                }
                            
                        

            footer = 

                        
                            {num}
                            条未选中
                        
                    
        }


        return (

            

                

                    
todos
                    
                
                {content}
                {footer}
            
        )
    }

    downHandle(ev){
        if( ev.keyCode === 13 ){
            app.addItem(ev.target.value);
            ev.target.value = "";
        }
    }

    toggleAll(ev){
        app.toggleAll(ev.target.checked)
    }
}



var section = document.createElement('section');
section.className = "todoapp"
document.body.appendChild(section);

function render(dataArr){
    ReactDOM.render(
,section)
}

render(app.dataArr);

app.render = render;

2.item.js 负责展示列表项

import React from 'react';
import ReactDOM from 'react-dom';

import {classNames} from './util.js';

export default class Item extends React.Component{
    render(){
        return 

                

                    
                    {this.props.content}
                    
                
                
            
    }
}

3.app.js 负责控制器的作用

import {store} from './util.js';

let app = {
    dataArr:[],
    info:function (){
        store("todo",app.dataArr);  
    },
    addItem:function (value){
        app.dataArr.push({
            id:Date.now(),
            content:value,
            compile:false
        });

        app.info();

        app.render(app.dataArr);
    },
    toggleAll:function (bl){
        app.dataArr.forEach((item)=>{
            item.compile  = bl;
        })  
        app.info();

        app.render(app.dataArr);
    },
    toggle:function (id){
        app.dataArr.forEach((item)=>{
            if( item.id === id ){
                item.compile  = !item.compile;
            }
        });
        app.info();

        app.render(app.dataArr);    
    },
    delectItem:function (id){
        var newArr = app.dataArr.filter((item)=>{
            return item.id !== id;
        });

        app.dataArr = newArr;
        app.info();
        app.render(app.dataArr);
    }
}

app.dataArr = store("todo") || [];

export default app;

4.工具类，负责存储到本地

let extend = (...args) => {
    var newObj = {};
    for (var i = 0; i < args.length; i++) {
        var obj = args[i];
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                newObj[key] = obj[key];
            }
        }
    }
    return newObj;
}

let store = (namespace, data) => {
    if (data) {
        return localStorage.setItem(namespace, JSON.stringify(data));
    }

    var store = localStorage.getItem(namespace);
    return (store && JSON.parse(store)) || [];
}

let hasOwn = {}.hasOwnProperty;
let classNames = (...args) => {
    var classes = '';

    for (var i = 0; i < args.length; i++) {
        var arg = args[i];
        if (!arg) continue;

        var argType = typeof arg;

        if (argType === 'string' || argType === 'number') {
            classes += ' ' + arg;
        } else if (Array.isArray(arg)) {
            classes += ' ' + classNames.apply(null, arg);
        } else if (argType === 'object') {
            for (var key in arg) {
                if (hasOwn.call(arg, key) && arg[key]) {
                    classes += ' ' + key;
                }
            }
        }
    }

    return classes.substr(1);
}

export {extend,store,classNames}