用Todolist实现增删查改操作

最新推荐文章于 2023-02-22 22:12:52 发布

Jiansr_

最新推荐文章于 2023-02-22 22:12:52 发布

阅读量799

点赞数 1

本文链接：https://blog.csdn.net/Jiansr_/article/details/103685103

版权

Todolist实现增删查改：

步骤如下：

基本思路：

一：UI界面

二：增删查改功能实现

（1）：创建Todeolist组件
（2）：添加列表项功能
（3）：删除列表元素
（4）：使用组件化实现删除功能

三：数据持久化操作

（1）：代码优化，暂时性储存

一：UI界面的实现

1.1 UI概述

UI是User Interface的缩写。其中，“Interface”前缀“Inter”的意思是“在一起、交互”，而翻译成中文“界面”之后， “交互”的概念没能得到体现。
用户研究、交互设计、界面设计。
首先，UI是指人与信息交互的媒介，它是信息产品的功能载体和典型特征。其次，UI是指信息的采集与反馈、输入与输出，这是基于界面而产生的人与产品之间的交互行为。最后，UI的高级形态可以理解为User Invisible。

二：增删查改功能实现

2.1：添加数据

对输入框绑定事件点击提交按钮使输入框内容生成到页面上代码如下：
// 输入框内容提取并重设

   msg(e){
        this.setState({
            inputValue : e.target.value
        })
    }
    // 按钮点击事件添加内容 (在内存中添加)
    add(){
        this.setState({
            // ...扩展运算符展开之后(不合并)
            list : [...this.state.list,this.state.inputValue],
            // 清空文本框的数据
            inputValue:''
        });
    }

2.2：删除数据

添加删除按钮事件，用于删除展示元素代码如下：

delete(index){
    var list = [...this.state.list];
    list.splice(index,1);
    this.setState({
        list:list
    })
}

2.3：修改数据

添加修改按钮事件，用于修改展示元素代码如下：

   update(index){
        //弹出输入框，用于填写新内容
        var arr = this.state.list;
        // prompt()方法用于显示可提示用户进行输入的对话框。
        //         这个方法返回用户输入的字符串。
        var rel = window.prompt('请输入新内容：');
        if(rel != null){
            arr.splice(index,1,rel);
            this.setState({
                list:arr
            })
        }
    }

注意：

字母大小写区分，尤其是方法和属性的大小写
最好用驼峰命名法命名变量等

三：数据持久化操作

使用react自带的方法实现本地数据初始化

// 加载时执行  (渲染前执行 页面输出前执行) 时 初始化浏览器本地储存的数据
    componentDidMount(){
        //从localStrong中获取myList
        var myList=window.localStorage.getItem('myList');
        if(myList===null || myList === ''){
            myList = []//初始化myList数组
        }else{
            // 用split()方法使得到的字符串转为数组
            myList = myList.split(',');
        }
        // 重设state值
        this.setState({
            list : myList
        });
        // 用来清空本地储存（用的时候放开注释）
        // window.localStorage.clear();
    }

增删查改时都要存入本地

  // 即使用setState()方法，this.setState(obj,function)，修改state属性的函数，
    // 参数1是要更新的数据对象，参数2是回调函数，参数2的主要作用是，用于展示更新后的state数据
    // 以添加事件为例
    add(){
        this.setState({
            // ...扩展运算符展开之后(不合并)
            list : [...this.state.list,this.state.inputValue],
            // 清空文本框的数据
            inputValue:''
        },()=>{
            // 将this.state.myList的内容放到当前myList中
            console.log(this.state.list);
            window.localStorage.setItem('myList',this.state.list)
        });
    }