React训练小demo

掉demo，点击取反重新赋值，

import React, {Component} from 'react'
import '../Todemo/Tododemo.less'
import Storage from '../../puble/Storage'

class Tododemo extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:'demo案例演示',
            list:[
                {
                    title:'你是狗',
                    checked:true
                },
                {
                    title:'你是猪',
                    checked:true
                },
                {
                    title:'你是猫',
                    checked:false
                },
                {
                    title:'你是驴',
                    checked:true
                },
            ],
         };
    }
    setData=(e)=>{

        if(e.keyCode ===13 && this.refs.input_value.value!==''){
            var temlist = this.state.list;
            var cty = this.refs.input_value.value
            temlist.push({
                title:cty,   // 前面数组里面的值，后面input的value。
                checked:false  // 默认设置false。
            });
            this.refs.input_value.value ='';  // 回车后，输入框为空。
            this.setState({
                list:temlist    //原始的list等于 当前更换新的temlist/list
            })
             //缓存数据，localStorage只能存字符串，需要把对象转化为字符串。
            // localStorage.setItem('list',JSON.stringify(temlist))//设置存储数据
              Storage.set('list',temlist);  // 封装localStorage

         }else{
            console.log('不能为空')
        }
    }
    Deleted =(key)=>{
        // alert(key)
        var temlist = this.state.list;
        temlist.splice(key,1)
        // 删除完重新赋值
        this.setState({
            list:temlist
        })
        //缓存数据，localStorage只能存字符串，需要把对象转化为字符串。
        //localStorage.setItem('list',JSON.stringify(temlist))//设置存储数据
          Storage.set('list',temlist); // 封装localStorage
    }
    inputchecked =(key)=>{
        var hobby = this.state.list;
        hobby[key].checked =!hobby[key].checked; // 点击checked取反。
        // 重新赋值。
        this.setState({
            hobby:hobby
          })
           //缓存数据，localStorage只能存字符串，需要把对象转化为字符串。
           //localStorage.setItem('list',JSON.stringify(hobby)) //设置存储数据
           Storage.set('list',hobby); // 封装localStorage
    }
    //生命周期，页面加载就会触发、
    componentDidMount(){
        //var todolist = JSON.parse(localStorage.getItem('list'));//获取存储数据
        var todolist = Storage.get('list'); // 封装localStorage
        if(todolist){
            this.setState({
                list:todolist
            })
        } 
    }

    render() {
        return (
            <div className='tododemo'>
                 <h2>{this.state.msg}</h2>
                 <div className='structure'>
                    <input ref='input_value' type="text" className='input_style'  onKeyUp={this.setData} /> 
                 </div>
                 <hr/>
                 <h4>进行中</h4>
                 <div className='create_medium'>
                   {/* {
                         this.state.list.map((item,key)=>{
                             return(
                                <p key={key}>{item} ------- <button onClick={this.Deleted.bind(this,key)}>删除</button></p>
                             )
                         })
                    } */}

                    {
                        this.state.list.map((item,key)=>{
                            if(!item.checked){
                                return(
                                    <p key={key}>
                                        <input type="checkbox" checked={item.checked} onChange={this.inputchecked.bind(this,key)} />
                                        {item.title} -------
                                        <button onClick={this.Deleted.bind(this,key)}>删除</button>
                                    </p> 
                                )
                            }
                           
                        })
                    }
                 </div>
                 <hr/>
                 <h4>已完成</h4>
                 <div className='completed'>
                    
                    {
                        this.state.list.map((item,key)=>{
                            if(item.checked){
                                return(
                                    <p key={key}>
                                    <input type="checkbox" checked={item.checked} onChange={this.inputchecked.bind(this,key)} />
                                    {item.title} -------
                                    <button onClick={this.Deleted.bind(this,key)}>删除</button>
                                </p>  
                                )
                            }
                            
                        })
                    }
                 </div>
            </div>
        );
    }
}

export default Tododemo;

封装localStorage 模块化

var Storage={
    set(key,vaule){
        localStorage.setItem(key,JSON.stringify(vaule));
    },
    get(key){
       return JSON.parse(localStorage.getItem(key)); 
    },
    remove(key){
        localStorage.removeItem(key);
    }
};
export default Storage;