react 实现Todolist 本地存储（方式二）

小咪咪 2022-12-11 05:23 169阅读 0赞

# react 实现Todolist #

*  主要功能  
    增加，删除，本地存储

结构图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjMyODE0NA_size_16_color_FFFFFF_t_70_pic_center]

App.js代码

import React,{ Component} from 'react';
    import Todo from './component/Todo.js'
    // 导入react和react组件
    
    //定义一个App组件 继承Component
    class App extends Component{ 
      //构造函数
      constructor(props){ 
        super(props);
        //调用父组件
        this.state = {  num:1 }
        //定义一个状态 （data数据）
      }
      //渲染节点
      render() { 
        return (
          <div >
             <Todo></Todo>
          </div>
        );
      }
    }
    
    
    export default App;
    // 导出 App组件

Todo.js代码

import React, {  Component } from 'react';
    class Todo extends Component { 
        constructor(props) { 
            super(props);
            this.state = { 
                list: [
                    {  done: true, title: "学习vue" },
                    {  done: false, title: "学习React" }
                ]
                // 定义清单list done 是否完成 title是标题文字
            }
        }
    
        inputSel(item){ 
            let  list = this.state.list;//获取到列表
            let  ind = list.indexOf(item);//获取item在列表中的下标
            list[ind].done = !list[ind].done;//让item的done值取反
            this.setState({ list}) //更新list;
        }
        addItem(e){ 
            if(e.keyCode!=13){ return};//不是enter键 不执行
            let list = this.state.list; //获取到列表
            list.unshift({ done:false,title:e.target.value}); //新数据添加到列表
            this.setState({ list})//更新list
            // localStorage.setItem("listName",JSON.stringify(this.state.list))
            e.target.value = '';//清空文本框数据
        }
        delItem(item){ 
            let  list = this.state.list;//获取到列表
            let  ind = list.indexOf(item);//获取item在列表中的下标 
            list.splice(ind,1);
            // localStorage.setItem("listName",JSON.stringify(this.state.list))
            this.setState({ list});
        }
        render() { 
            return (
                <div>
                    <h1>美妙清单</h1>
                    <input type="text" placeholder="添加计划" onKeyUp={ e=>this.addItem(e)}/>
                    <h3>未完成 { this.state.list.filter(item=>!item.done).length}</h3>
                    <div className="list">
                        { 
                            this.state.list.filter(item=>!item.done).map(item => 
                            <div key={ item.title}>
                                <input type="checkbox" checked={ item.done} onChange={ this.inputSel.bind(this,item)} />
                                <span className="item-content">{ item.title}</span> 
                                <button onClick={ this.delItem.bind(this,item)}>×</button>
                            </div>)
                            
                        }
                        { /* 遍历list数据，生成html节点（input是否完成 item-content标题内容） */}
                    </div>
                    <h3>已完成 { this.state.list.filter(item=>item.done).length}</h3>
                    <div className="list">
                        { 
                            this.state.list.filter(item=>item.done).map(item => 
                            <div key={ item.title}>
                                <input type="checkbox" checked={ item.done} onChange={ this.inputSel.bind(this,item)} />
                                <span className="item-content">{ item.title}</span> 
                                <button onClick={ this.delItem.bind(this,item)}>×</button>
                            </div>)
                        }
                        { /* 遍历list数据，生成html节点（input是否完成 item-content标题内容） */}
                    </div>
                </div>
            );
        }
        //存储的代码：都在下方
        componentDidMount(){ 
            var str = localStorage.getItem("list")||"[]";
            //获取本地存储的数据的数据 取不到用“[]”
            var list = JSON.parse(str);//转成js对象
            this.setState({ list}) //更新list
        }
        componentDidUpdate(prevProps,prevState){ 
            localStorage.setItem("list",JSON.stringify(this.state.list))
            //当数据更新的时候，把数据转换为字符串 存储
        }
    }
    
    export default Todo;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjMyODE0NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/2bd51c06933543e2834c296a20214145.png