入门react简易TodoList实现增删改查

TODOList，数据增删改查的操作

操作思路：

UI界面怎么实现；UI（User Interface）
功能代码实现：

（1）添加数据

（2）查询数据，展示

（3）删除数据

（4）修改数据
数据持久化操作

localStorage.setItem(‘key’,value)

var value = localStorage.getItem(‘key’)
修改state属性
this.setState(obj,faction)，修改state属性的函数
（1）参数1是要更新的数据对象
（2）参数2是回调函数，参数2的主要作用是，用于展示更新后的state数据
setState()方法是异步方法
如果在setState()函数外保存数据，有可能保存不了，因为保存时数据还没更新

操作步骤：

一.添加数据

1.1 html页面

<!DOCTYPE html>
<html lang="en"> 
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Web site created using create-react-app" />
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

1.2 js页面

import React from 'react';
import ReactDOM from 'react-dom';
import Todolist2 from './Todolist2';
ReactDOM.render(<Todolist2 />, document.getElementById('root'));

1.3 增删改查数据存储持久化数据

// 引入模块
import React from 'react'

class Todolist2 extends React.Component{
        // =========================================
        // 构造函数
        constructor(){
        super();
        this.state={
            list:[],//展示列表 只能遍历数组
            myInput:"",//记录输入框的值
        }
        }
        // =========================================
        // 按钮添加事件
        handelbutChange(){
            this.setState({
            // ...展开运算符，将this.state.list里面的值也就是inputValue里的值放到list中;
                list:[...this.state.list,this.refs.myInput.value],
            },()=>{
           console.log(this.state.list);
           
           window.localStorage.setItem('myList',this.state.list);
            })
            // 点击添加按钮 清空输入框
               this.refs.myInput.value=this.state.myInput
        }
            // 键盘事件
            keyDown(e){
                // 键盘码“13”为回车
                if(e.keyCode==13){
                    // 调用按钮添加事件
                    this.handelbutChange();
                }
            }


        // ==========================================
        // 删除事件
        handeldelChange(index){
            // 删除指定下标  splice用于删除和添加（值1：获取id,值2：删除的数量）
            this.state.list.splice(index,1)
            // 重新设置状态
            this.setState({
            list:this.state.list,
            },()=>{
                window.localStorage.setItem('myList',this.state.list);
            })
        }
        // ==========================================
        // 修改事件
        handelupdateChange(index){
            // 弹出输入框，用于填写新内容
            var rel=window.prompt('请输入修改内容');
            // 判断输入框里的内容不为空的话
            if(rel !=null){
                // rel要是修改的
                this.state.list.splice(index,1,rel)
                // 重新设置状态
                this.setState({
                list:this.state.list,

                },()=>{
                    window.localStorage.setItem('myList',this.state.list);
                })
            }
        }

        // ===============================================
        // 加载更新时执行，初始化数据，从LocalStorage中查询出来的数据
        componentWillMount(){
        // 从LocalStorage中获取数据myList
        var myList=window.localStorage.getItem('myList');
        //判断myList里数据是否为空
        if(myList==null ||myList==""){
            //如果为空 就初始化myList数组
            myList=[];
        }else{
            // 把字符串分割成数组
            myList=myList.split(',');
        }
        // 重新设置状态
        this.setState({
            list:myList
        });
        }


//    ===============================================
            // 重写渲染方法
    render() {
        return (
            <React.Fragment>
            {/*文本框  键盘事件*/}
            <input type="text" ref="myInput" onKeyDown={this.keyDown.bind(this)} />
             {/*添加按钮*/}
            <button onClick={this.handelbutChange.bind(this)}>添加</button>
           <ul>
            {/*map 循环遍历*/}
             {this.state.list.map((item,index)=>{
                return(  
                    <li key={index}>
                    {index},{item}
                    {/*删除按钮 绑定handelChange方法*/}
                    <button  onClick={this.handeldelChange.bind(this,index)}>删除</button>
                     {/*修改按钮*/}
                    <button  onClick={this.handelupdateChange.bind(this,index)}>修改</button> 
                    </li>
                )
             })}
           </ul>
            </React.Fragment>
        )
    }
}
           // 导出模块
           export default Todolist2;