TodoList案例

TodoList案例我们今天模仿ToDoList进⾏⼀个简单的增，删，改，查的操作
可参考官⽹
下边直接上代码
1 import React from 'react';
2 class App extends ponent{
3//构造函数
4 constructor(){
5 super()
6this.state={
7 arry:[], //展⽰列表
8 str:'' //记录输⼊框的值
9 }
10 };
11//加载时对数组进⾏操作
12 componentWillMount(){
13// 获取本地数据赋值给myArry
14var myArry= window.localStorage.getItem('myArry')
15//判断myArry是否是空的,如果myArry是空的，就让它等⼀个空数组
16if(myArry == null || myArry ==''){
17 myArry=[]
18//如果myArry不是空的，拿到的数据是字符串需要通过split进⾏转换成数组
19 }else{
20 myArry = myArry.split(',')
21 }
22this.setState ({
23//转换过的数组赋值给arry
24 arry:myArry
25 })
26 };
27//按钮点击事件⽅法
28 btn(){
29var val = this.refs.val.value;
30if(this.refs.val.value ===''){
31 alert("请输⼊")
32 }else{
33
34this.setState({
35//运⽤扩展运算符添加数据到arry
36 arry:[...this.state.arry,val]
37 },function(){
38// 更新本地数据
39 window.localStorage.setItem('myArry',this.state.arry)
40 })
41 }
42// 输⼊框值清空
43this.refs.val.value='';
44 }
45 render(){
46return(
47 <React.Fragment>
48 <input type='text' ref='val' onKeyDown={(e)=>{
49//键盘事件
50if(e.keyCode===13){
51// 调⽤上⾯添加的函数
52this.btn()
53 }
54 }} />
55 <button onClick={this.btn.bind(this)}>提交</button>
56 <ul>
57 {/* 对数组进的遍历渲染 */}
58 {this.state.arry.map((m,i)=>{
59return(
60// key属性为唯⼀值，没有该属性，浏览器会报警告信息，在做添加操作时会出bug
61 <li key={i}>{m} &nbsp;&nbsp;
62 <button onClick={()=>{
63//通过prompt弹框获取要修改的内容
64var prompt = window.prompt()
65// 判断是不是确认修改
66if(prompt != null){
67var list = this.state.arry
68//在arry数组中找到下标i设置修改个数为1，修改的内容为list
69 list.splice(i,1,prompt)
70this.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
81this.state.arry.splice(i,1)
82this.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;
我们看⼀下效果。