码迷,mamicode.com
首页 > 其他好文 > 详细

React todolist案例和持久化实现

时间:2020-03-12 18:33:45      阅读:52      评论:0      收藏:0      [点我收藏+]

标签:extends   code   exp   classname   data   div   val   nod   rop   

import React,{Component} from ‘react‘;

import ‘../assets/css/index.css‘;

class Todolist extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[
                // {
                //     title:‘录制ionic‘,
                //     checked:true
                // },
                // {
                //     title:‘录制nodejs‘,
                //     checked:false
                // }
                // ,
                // {
                //     title:‘录制egg.js‘,
                //     checked:true
                // } ,
                // {
                //     title:‘录制vue‘,
                //     checked:false
                // }
            ]
        };
    }   

    addData=(e)=>{
        //按下回车的时候在增加

        if(e.keyCode==13){

                
            // alert(title);

            let title=this.refs.title.value;
            let tempList=this.state.list;

            tempList.push({
                title:title,
                checked:false
            })
            //改变后的值赋值给list

            this.setState({

                list:tempList
            })

            //表单置为空
            this.refs.title.value=‘‘;

            //执行缓存数据
            localStorage.setItem(‘todolist‘,JSON.stringify(tempList));


        }
    }
    checkboxChage=(key)=>{

        // alert(‘111‘);
        let tempList=this.state.list;

        tempList[key].checked=!tempList[key].checked;


        this.setState({

            list:tempList
        })

        //执行缓存数据
        localStorage.setItem(‘todolist‘,JSON.stringify(tempList));

    }
    removeData=(key)=>{

        let tempList=this.state.list;


        tempList.splice(key,1);


         this.setState({

            list:tempList
        })
        //执行缓存数据
        localStorage.setItem(‘todolist‘,JSON.stringify(tempList));


    }

    //生命周期函数  页面加载就会触发

    componentDidMount(){

        //获取缓存的数据

        var todolist=JSON.parse(localStorage.getItem(‘todolist‘));   /*字符串*/

        if(todolist){

            this.setState({

                list:todolist
            })
        }

    }
    render() {
        return (
            <div>
               
                <header className="title">TodoList:  <input ref="title" onKeyUp={this.addData} /> </header>

                <h2>待办事项</h2>

                <hr />

                <ul>
                    {
                        this.state.list.map((value,key)=>{

                            if(!value.checked){

                                return (

                                    <li key={key}>

                                        <input type="checkbox" checked={value.checked} onChange={this.checkboxChage.bind(this,key)} />

                                        {value.title}


                                        -- <button onClick={this.removeData.bind(this,key)}>删除</button>
                                    </li>
                                )
                            }

                        })


                    }
                </ul>           



                <h2>已完成事项</h2>

                <hr />
                <ul>
                    {
                        this.state.list.map((value,key)=>{

                            if(value.checked){

                                return (

                                    <li key={key}>

                                        <input type="checkbox" checked={value.checked} onChange={this.checkboxChage.bind(this,key)} />

                                        {value.title}


                                        -- <button onClick={this.removeData.bind(this,key)}>删除</button>
                                    </li>
                                )
                            }

                        })
                    }
                </ul>    


            </div>
        );
    }
}
export default Todolist;

storage.js模块封装:

var storage={


    set(key,value){

        localStorage.setItem(key,JSON.stringify(value));
    },
    get(key){

        return JSON.parse(localStorage.getItem(key));

    },remove(key){

        localStorage.removeItem(key)
    }
};

export default storage;

使用:

import React,{Component} from ‘react‘;

import ‘../assets/css/index.css‘;

//引入自定义模块
import storage from ‘../model/storage‘;

class Todolist extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[
             
            ]
        };
    }   

    addData=(e)=>{
        //按下回车的时候在增加

        if(e.keyCode==13){

                
            // alert(title);

            let title=this.refs.title.value;
            let tempList=this.state.list;

            tempList.push({
                title:title,
                checked:false
            })
            //改变后的值赋值给list

            this.setState({

                list:tempList
            })

            //表单置为空
            this.refs.title.value=‘‘;

            //执行缓存数据           

            storage.set(‘todolist‘,tempList);


        }
    }
    checkboxChage=(key)=>{

        // alert(‘111‘);
        let tempList=this.state.list;

        tempList[key].checked=!tempList[key].checked;


        this.setState({

            list:tempList
        })

        //执行缓存数据
        storage.set(‘todolist‘,tempList);

    }
    removeData=(key)=>{

        let tempList=this.state.list;


        tempList.splice(key,1);


         this.setState({

            list:tempList
        })
        //执行缓存数据
        storage.set(‘todolist‘,tempList);


    }

    //生命周期函数  页面加载就会触发

    componentDidMount(){

        //获取缓存的数据

        var todolist=storage.get(‘todolist‘);  

        if(todolist){

            this.setState({

                list:todolist
            })
        }

    }
    render() {
        return (
            <div>
               
                <header className="title">TodoList:  <input ref="title" onKeyUp={this.addData} /> </header>

                <h2>待办事项</h2>

                <hr />

                <ul>
                    {
                        this.state.list.map((value,key)=>{

                            if(!value.checked){

                                return (

                                    <li key={key}>

                                        <input type="checkbox" checked={value.checked} onChange={this.checkboxChage.bind(this,key)} />

                                        {value.title}


                                        -- <button onClick={this.removeData.bind(this,key)}>删除</button>
                                    </li>
                                )
                            }

                        })


                    }
                </ul>           



                <h2>已完成事项</h2>

                <hr />
                <ul>
                    {
                        this.state.list.map((value,key)=>{

                            if(value.checked){

                                return (

                                    <li key={key}>

                                        <input type="checkbox" checked={value.checked} onChange={this.checkboxChage.bind(this,key)} />

                                        {value.title}


                                        -- <button onClick={this.removeData.bind(this,key)}>删除</button>
                                    </li>
                                )
                            }

                        })
                    }
                </ul>    


            </div>
        );
    }
}
export default Todolist;

 

React todolist案例和持久化实现

标签:extends   code   exp   classname   data   div   val   nod   rop   

原文地址:https://www.cnblogs.com/loaderman/p/11552624.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!