React 待办事项列表案例

例：在文本框中输入内容回车后，内容出现在未完成中；点击未完成中的选择框，其内容出现在已完成中，反之亦然；点击删除按钮会删除

新建一个todoList .js文件：

import React from 'react';
import '../assets/css/todoList.css'

class todoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[
                {
                    title:"PHP",
                    isck:false
                },
                {
                    title:"React",
                    isck:true
                }
            ]
        };
    }
    //回车事件
    keyEnter=(e)=>{
        if(e.which===13){
            let ele=e.target;
            let listinfo={
                title:ele.value,
                isck:false
            }
            let newlist=this.state.list;
            newlist.push(listinfo);
            this.setState({
                list:newlist
            });
            ele.value=""
        }
    }
    //监听事件 
    changeBox=(index)=>{
        let data=this.state.list;
        data[index].isck=!data[index].isck;
        this.setState({
            list:data
        });
    }
    //删除事件
    deleteData=(index)=>{
        let data=this.state.list;
        data.splice(index,1);
        this.setState({
            list:data
        });
    }
    render() {
        return (
            <div className="block">
                <div className="title">
                    <div className="titleleft"><h2>ToDoList</h2></div>
                    <div className="titleright">
                        <input type="text" onKeyPress={this.keyEnter}/>
                    </div>
                </div>
                <hr/>
                <div>
                    <ul>
                        <h3>未完成</h3>
                        {
                            this.state.list.map((v,k)=>{
                                if(!v.isck){
                                    return (
                                        <div key={k}>
                                            <li><input type="checkbox" checked={v.isck} onChange={this.changeBox.bind(this,k)}/>{v.title}--------<button onClick={this.deleteData.bind(this,k)}>删除</button></li>
                                        </div>
                                    )
                                }
                                return ""
                            })
                        }
                        <h3>已完成</h3>
                        {
                            this.state.list.map((v,k)=>{
                                if(v.isck){
                                    return (
                                        <div key={k}>
                                            <li><input type="checkbox" checked={v.isck} onChange={this.changeBox.bind(this,k)}/>{v.title}--------<button onClick={this.deleteData.bind(this,k)}>删除</button></li>
                                        </div>
                                    )
                                }
                                return ""
                            })
                        }
                    </ul>
                </div>
            </div>
        );
    }
}
export default todoList;

CSS样式：

.block{
    width: 600px;
    min-height: 200px;
    margin: 0 auto;
    border: 1px solid silver;
}
.title{
    display: flex;
    flex-direction: row;
    background-color: black;
    box-sizing: border-box;
    padding: 10px 15px;
}
.titleleft{
    color: white;
    flex: 0.5;
}
.titleright{
    flex: 2;
    color: white;
    padding: 20px 15px;
}
.titleright>input{
    width: 250px;
    height: 30px;
    border: 1px solid white;
    outline: none;
    border-radius: 10px;
    padding-left: 10px;
    font-size: 20px;
}

如图所示：

写入缓存，保持页面统一：
react 封装自定义模块优化代码性能（意思就是将某个功能封装为一个模块在任何组件里面都可以被使用）

• 封装的模块

新建一个Storage文件夹，在该文件夹下新建一个名为Storage.js的文件，写入：

let storage={
    setStorage(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    getStorage(key){
        return JSON.parse(localStorage.getItem(key));
    },
    removeStorage(key){
        localStorage.removeItem(key);
    }
}
export default storage;

• 在todolist.js中引用

（1）导入模块

import storage from '../Storage/Storage'

（2）添加写入的缓存
在回车事件中写入：

storage.setStorage("lists",newlist);

在监听、删除事件中写入：

storage.setStorage("lists",data);

其中的newlist，data均为获取时自定义的名字

（3）在react生命周期函数中加载缓存

//页面加载就会触发  渲染完成
componentDidMount(){
     //读取缓存
     let data=storage.getStorage("lists");
     //第一次刷新的时候，data不存在，给list赋值以后,map无法遍历，因此在这里需判断data是否存在
     if(data){
         this.setState({
             list:data
         });
     }
}

如图所示：