晨曦的博客

技术博客

0%

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

发表于 更新于 分类于 ，

详情请点阅读全文

一、项目功能概述

示例网址：http://www.todolist.cn/
在这里插入图片描述
功能：

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

    二、项目实现

    2.1简单的添加、删除功能

    【TodoList2 .js】
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    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】
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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】
    1
    2
    3
    4
    5
    6
    .list{
        padding-left:440px;
        padding-top:80px;
        color: blueviolet;
        width:200px;
    }
    效果：在input输入文本后点添加，会自动在待做事项显示；点删除，会删除对应事项；
    在这里插入图片描述

    2.2完整实现

    【todolistOk.js】
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
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】

1
2
3
4
5
6
7
8
9
10
11
12
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
写入缓存写法：

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

2.3.1生命周期函数：componentDidMount()

【概念】函数名固定，只要页面加载，就会执行此函数内的内容；
页面加载就读取缓存写法：

1
2
3
4
5
6
7
8
9
//3.生命周期函数componentDidMount()  页面加载就会触发
   componentDidMount(){
       var todolist=JSON.parse(localStorage.getItem('todolist'));   //json.parse转化成对象（获取缓存的数据- 字符串格式）
       if(todolist){
           this.setState({
               list:todolist
           })
       }
    }

详细代码成品：
【todolistOk.js】
功能：

  • 实现页面刷新之后数据也不丢失
  • 具体实现：把数据存入localstorage里，页面加载时直接读取localstorage.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    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】不变
    在这里插入图片描述