6.todolist循环增删数据，方法的封装和使用，页面初始化函数

内容

通过案例练习使用

1.循环数据，增删数据
2.常用方法的封装和使用-storage
3.页面初始化时的函数componentDidMount(){}

详细例子

1.Todolist组件

// 内容：封装storage的方法
import React from 'react';
import storage from '../model/storage'

class Todolist extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                { title: '录制1', checked: true },
                { title: '录制2', checked: false },
                { title: '录制3', checked: true },
                { title: '录制4', checked: true },
            ]
        };
    }


    add=(e)=>{
        if(e.keyCode == 13){
            let list = this.state.list;
            list.push({'title': this.refs.title.value, checked:false})
            this.setState({list:list});
            this.refs.title.value = '';
            storage.set('todolist', list);
        }
    }

    change = (i) => {
        let list = this.state.list;
        list[i].checked = !list[i].checked;
        this.setState({list: list});
        storage.set('todolist', list);
    }

    del = (index)=>{
        let list = this.state.list;
        list.splice(index, 1);
        this.setState({ list: list })
        storage.set('todolist', list);
    }

    // 声明周期
    componentDidMount(){
        let list = storage.get('todolist');
        if(list){
            this.setState({list})
        }
    }   

    render() {
        return (
            <div>
                <h1>todolist</h1>
                <div>
                    <input ref="title" type="text" onKeyUp={this.add}/>
                </div><hr/>

                <h4>待分配</h4>
                <ul>
                    {
                        this.state.list.map((val, key) => {
                            if (!val.checked) {
                                return (
                                    <li key={key}>
                                        <input type="checkbox" checked={val.checked} onChange={this.change.bind(this, key)} />{val.title} ---
                                        <button onClick={this.del.bind(this,key)}>删除</button> 
                                    </li>
                                )
                            }
                        })
                    }
                </ul>
                <hr />

                <h4>已分配</h4>
                <ul>
                    {
                        this.state.list.map((val, key) => {
                            if (val.checked) {
                                return (
                                    <li key={key}>
                                        <input type="checkbox" checked={val.checked} onChange={this.change.bind(this, key)} />{val.title} ---
                                        <button onClick={this.del.bind(this,key)}>删除</button>
                                    </li>
                                )
                            }
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default Todolist;

2.方法的封装和使用

// 使用：1.先导入import storage from '../model/storage'
// 2.storage.set('todolist', list);

let 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;