TODOList 数据增删改查的操作

最新推荐文章于 2022-10-23 19:02:32 发布

yiyiyiyi_

最新推荐文章于 2022-10-23 19:02:32 发布

阅读量877

点赞数 2

本文链接：https://blog.csdn.net/qiqiyiyi_/article/details/103672002

版权

TODOList 数据增删改查的操作

思路：

                     1、UI界面怎么实现     UI（User Interface）
                     2、功能代码实现
                                 （1）添加数据
                                 （2）查询数据，展示
                                 （3）删除数据
                                 （4）修改数据

3、数据持久化操作

一、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:''
        });
    }

可以添加键盘事件，增加用户体验

    keyDown(e){
   
        if(e.keyCode === 13){
   
            this.add();
        }
    }

2.2 查询数据，展示

实现数据添加，并查找数据渲染到页面上

2.3 删除数据

添加删除按钮事件，用于删除展示元素

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

2.4 修改数据

添加修改按钮事件，用于修改展示元素

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