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

react 实现Todolist2

• 功能：
  增加，删除，本地存储
• 推荐使用方式二，方式二更加方便

方式二的连接
https://blog.csdn.net/weixin_46328144/article/details/108853798

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是标题文字
        }
        
        if(localStorage.getItem("listName")!=null){
            this.state.list = JSON.parse(localStorage.getItem("listName"))
        }else{
            localStorage.setItem("listName",JSON.stringify(this.state.list))
        }
    }

    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>
        );
    }
}

export default Todo;