TodoList案例

我们今天模仿ToDoList进行一个简单的增，删，改，查的操作

可查看官网  http://www.todolist.cn/    

下边直接上代码

 1 import React from 'react';
 2 class App extends  React.Component{
 3   //构造函数
 4   constructor(){
 5     super()
 6     this.state={
 7       arry:[], //展示列表
 8       str:''   //记录输入框的值
 9     }
10   };
11   //加载时对数组进行操作 
12   componentWillMount(){ 
13      // 获取本地数据赋值给myArry
14     var myArry= window.localStorage.getItem('myArry')
15      //判断myArry是否是空的,如果myArry是空的，就让它等一个空数组
16     if(myArry == null || myArry ==''){
17       myArry=[]     
18       //如果myArry不是空的，拿到的数据是字符串需要通过split进行转换成数组
19     }else{   
20       myArry = myArry.split(',')
21     }
22   this.setState ({
23     //转换过的数组赋值给arry
24     arry:myArry  
25 })
26   };
27   //按钮点击事件方法
28   btn(){
29     var val = this.refs.val.value;
30     if(this.refs.val.value ===''){
31       alert("请输入")
32     }else{
33   
34     this.setState({ 
35        //运用扩展运算符添加数据到arry
36       arry:[...this.state.arry,val]  
37     },function(){
38       // 更新本地数据
39       window.localStorage.setItem('myArry',this.state.arry)
40     })
41     } 
42     // 输入框值清空
43     this.refs.val.value='';
44   }  
45   render(){
46       return(
47         <React.Fragment>
48           <input type='text' ref='val' onKeyDown={(e)=>{
49             //键盘事件
50             if(e.keyCode===13){ 
51               // 调用上面添加的函数
52                this.btn()
53             }
54           }} />
55           <button onClick={this.btn.bind(this)}>提交</button>
56           <ul>
57             {/* 对数组进的遍历渲染 */}
58              {this.state.arry.map((m,i)=>{
59                return(
60     //  key属性为唯一值，没有该属性，浏览器会报警告信息，在做添加操作时会出bug 
61                <li key={i}>{m} &nbsp;&nbsp;
62                <button onClick={()=>{
63                  //通过prompt弹框获取要修改的内容
64                  var prompt = window.prompt()
65                 // 判断是不是确认修改
66                  if(prompt != null){
67                    var list = this.state.arry
68                   //在arry数组中找到下标i设置修改个数为1，修改的内容为list
69                    list.splice(i,1,prompt)
70                    this.setState({
71                   //修改过后把list值重新赋给arry
72                      arry:list
73                    },function(){
74                     window.localStorage.setItem('myArry',this.state.arry)
75                    })
76                  }
77 
78                }}>修改</button>&nbsp;&nbsp;&nbsp;
79                <button onClick={()=>{
80                 //  对数组进行截取下标为i  删除个数为1
81                 this.state.arry.splice(i,1)
82                 this.setState({
83                    //截取过后把list值重新赋给arry
84                   arry:this.state.arry
85                 },function(){
86                   window.localStorage.setItem('myArry',this.state.arry)
87                 })
88                }}>删除</button>
89                
90                </li>
91                ) 
92                })}
93           </ul>
94         </React.Fragment>
95       )
96     }
97 }
98 
99 export default App;

我们看一下效果