用Todolist实现增删查改操作

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

最后总结

（1）：组件规划：明确需求功能，明确功能对应的组件之间的关系
（2）：子组件进行事件操作，将用户的行为记录下来，然后通过参数传到app做 数据处理和setState。
（3）：多用心练习，理解组件之间的关系与关联基本上就可以了