八、React实战：可交互待办事务表（表单使用、数据的本地缓存local srtorage、生命同期函数（页面加载就会执行函数名固定为componentDidMount()））

2021-11-08 08:42:12

一、项目功能概述

输入待做事项，回车，把任务添加到【正在进行】
【正在进行】任务，勾选之后，变成已【经完成事项】
【已完成事务】，勾选之后，变回【正在进行】
最后的删除按钮点之后删除事务

二、项目实现

2.1简单的添加、删除功能

【TodoList2 .js】

import React,{Component} from 'react';

import './css/todolist.css';

class TodoList2 extends Component{

    constructor(props){

        super(props);

        this.state={

            msg:'待做事项列表',

            list:[]

        }

    }

    //此处用第2种方法ref获取节点值复习一下之前知识；（正常用e.target.value获取）

    handlelist=()=>{

        let templist=this.state.list; //获取state里的内容，定义为一个临时列表

        templist.push(this.refs.list.value); //把input里的值推到临时列表，返回：一个下标值

        this.refs.list.value=''; //添加完成后清除输入框里的内容

        this.setState({

            list:templist //让列表值等于刚才的临时列表

        })

    }

    //删除列表函数

    dellist=(key)=>{

        let templist=this.state.list;

        templist.splice(key,1); // splice方法向/从数组中添加/删除项目，然后返回被删除的项目

        this.setState({

            list:templist

        })

    }

    render(){

        return(

            <div>

            <h1>{this.state.msg}</h1>

            <input ref='list' /><button onClick={this.handlelist}>添加</button>

            <hr/>

            <h2>待做事项</h2>

            <ol className="list">

                {

                    // 此处map(function(value,key){})如果这样写不加箭头，指向就是document当前文档。加了才指向当前函数

                    //此处button onclick里写法意思是：把当前函数的当前li的key绑定到dellist函数上去，方法调用

                this.state.list.map((value,key)=>{

                    return(<li key={key}>{value} <button onClick={this.dellist.bind(this,key)}>删除</button></li>)

                })

                }

            </ol>

            </div>

        )

    }

}

export default TodoList2;

【App.js】

import React from 'react';

import './App.css';

import Demo from './components/toDoList2'

function App() {

  return (

    <div className="App">

        <Demo />

    </div>

  );

}

export default App;

【components/css/todolist.css】

.list{

    padding-left:440px;

    padding-top:80px;

    color: blueviolet;

    width:200px;

}

效果：在input输入文本后点添加，会自动在待做事项显示；点删除，会删除对应事项；

2.2完整实现

【todolistOk.js】

import React, { Component } from 'react';

class TodoList extends Component {

    constructor(props){

        super(props);

        this.state={

          msg:'todolist：',

          list:[

            {title:'录制ionic',checked:true},

            {title:'录制nodejs',checked:false},

            {title:'录制egg.js',checked:true},

            {title:'录制vue',checked:false}

            ]

        }

    }

    //0.把input值添加到state的list里

    addList=(e)=>{

        if(e.keyCode==13){ //如果按下的是回车键则执行以下代码

            let tempList=this.state.list; //获取state的默认列表为临时列表

            let title=e.target.value; //把input输入的值赋值给临时title,此处也可用ref来传值:this.ref.ref_value.value

            tempList.push({title:title,checked:false}) //把临时title推到templist临时列表时，checked默认为false

            this.setState({ //把临时列表正式加入的state的列表

                list:tempList

            });

            e.target.value=''; //添加成功后清除input为空

        }

    }

    //checkbox处理函数注意传过来的key值源自.bind(this,key)

    handleCheck=(key)=>{

        let tempList=this.state.list;

        tempList[key].checked=!tempList[key].checked; //把对应的表的checked的值取反，即：是false变true，是true变false;

        this.setState({

            list:tempList

        })

    }

    //删除事项函数

    dellist=(key)=>{

        let tempList=this.state.list;

        tempList.splice(key,1)

        this.setState({

            list:tempList

        })

    }

    render() {

      return (

        <div>

        {this.state.msg}<input onKeyUp={this.addList} /><br/>

        <hr/>

        <h2>待办事项：</h2>

        <ul>{

            this.state.list.map((value,key)=>{

                if(value.checked==false){ //!value.checked 也可写成这个

                    return(

                    <li key={key}>

                        <input type='checkbox' checked={value.checked} onChange={this.handleCheck.bind(this,key)} />

                        {value.title}--

                        <button onClick={this.dellist.bind(this,key)}>删除</button>

                    </li>

                    )

                }

            })

            }</ul><br/>

        <hr/>

        <h2>已完成事项：</h2>

        <ul>{

            this.state.list.map((value,key)=>{

                if(value.checked==true){ //value.checked 也可写成这个

                    return(

                    <li key={key}>

                        <input type='checkbox' checked={value.checked} onChange={this.handleCheck.bind(this,key)} />

                        {value.title}--

                        <button onClick={this.dellist.bind(this,key)}>删除</button>

                    </li>

                    )

                }

            })

            }</ul><br/>

        </div>

      );

    }

}

export default TodoList;

【App.js】

import React from 'react';

import './App.css';

import Demo from './components/todolistOk'

function App() {

  return (

    <div className="App">

        <Demo />

    </div>

  );

}

export default App;

效果：（功能详情见头部：一、功能概述）（具体样式区别写css即可）

2.3实现Todolist数据本地缓存（生命周期函数）

2.3.0 local storage本地缓存函数

【local storage使用详见】：https://blog.csdn.net/u010132177/article/details/103029716

写入缓存写法：

localStorage.setItem('todolist',JSON.stringify(tempList)); //把表转化为string转化为字符串存入名为todolist的列表

2.3.1生命周期函数：componentDidMount()

【概念】函数名固定，只要页面加载，就会执行此函数内的内容；

页面加载就读取缓存写法：

 //3.生命周期函数componentDidMount()  页面加载就会触发

    componentDidMount(){

        var todolist=JSON.parse(localStorage.getItem('todolist'));   //json.parse转化成对象（获取缓存的数据- 字符串格式）

        if(todolist){

            this.setState({

                list:todolist

            })

        }

     }

详细代码成品：

【todolistOk.js】

功能：

实现页面刷新之后数据也不丢失
具体实现：把数据存入localstorage里，页面加载时直接读取localstorage.

import React, { Component } from 'react';

import { stringify } from 'querystring';

class TodoList extends Component {

    constructor(props){

        super(props);

        this.state={

          msg:'todolist：',

          list:[

           /* {title:'录制ionic',checked:true},

            {title:'录制nodejs',checked:false},

            {title:'录制egg.js',checked:true},

            {title:'录制vue',checked:false}

           */

            ]

        }

    }

    //0.把input值添加到state的list里

    addList=(e)=>{

        if(e.keyCode==13){ //如果按下的是回车键则执行以下代码

            let tempList=this.state.list; //获取state的默认列表为临时列表

            let title=e.target.value; //把input输入的值赋值给临时title,此处也可用ref来传值:this.ref.ref_value.value

            tempList.push({title:title,checked:false}) //把临时title推到templist临时列表时，checked默认为false

            this.setState({ //把临时列表正式加入的state的列表

                list:tempList

            });

            e.target.value=''; //添加成功后清除input为空

            localStorage.setItem('todolist',JSON.stringify(tempList)); //把表转化为string转化为字符串存入名为todolist的列表

        }

    }

    //1. checkbox处理函数注意传过来的key值源自.bind(this,key)

    handleCheck=(key)=>{

        let tempList=this.state.list;

        tempList[key].checked=!tempList[key].checked; //把对应的表的checked的值取反，即：是false变true，是true变false;

        this.setState({

            list:tempList

        })

        localStorage.setItem('todolist',JSON.stringify(tempList)); //把表转化为string转化为字符串存入名为todolist的列表

    }

    //2. 删除事项函数

    dellist=(key)=>{

        let tempList=this.state.list;

        tempList.splice(key,1)

        this.setState({

            list:tempList

        })

        localStorage.setItem('todolist',JSON.stringify(tempList)); //把表转化为string转化为字符串存入名为todolist的列表

    }

    //3.生命周期函数componentDidMount()  页面加载就会触发

    componentDidMount(){

        var todolist=JSON.parse(localStorage.getItem('todolist'));   //json.parse转化成对象（获取缓存的数据- 字符串格式）

        if(todolist){

            this.setState({

                list:todolist

            })

        }

     }

    render() {

      return (

        <div>

        {this.state.msg}<input onKeyUp={this.addList} /><br/>

        <hr/>

        <h2>待办事项：</h2>

        <ul>{

            this.state.list.map((value,key)=>{

                if(value.checked==false){

                    return(

                    <li key={key}>

                        <input type='checkbox' checked={value.checked} onChange={this.handleCheck.bind(this,key)} />

                        {value.title}--

                        <button onClick={this.dellist.bind(this,key)}>删除</button>

                    </li>

                    )

                }

            })

            }</ul><br/>

        <hr/>

        <h2>已完成事项：</h2>

        <ul>{

            this.state.list.map((value,key)=>{

                if(value.checked==true){

                    return(

                    <li key={key}>

                        <input type='checkbox' checked={value.checked} onChange={this.handleCheck.bind(this,key)} />

                        {value.title}--

                        <button onClick={this.dellist.bind(this,key)}>删除</button>

                    </li>

                    )

                }

            })

            }</ul><br/>

        </div>

      );

    }

}

export default TodoList;

【App.js】不变

码农公寓