一个简单的ToDoList

周大胖子

1. import React, { Fragment, Component } from 'react';
   
2. import './App.css';
   
3. 
   
4. class Mytest extends Component {
   
5.   // 第一步 在所有函数之前执行的函数
   
6.   // 这是固定写法？？？ what  why
   
7. 
   
8.   constructor(props) {
   
9. 
   
10.     super(props);
    
11. 
    
12.     // 所有的数据 都在 state里
    
13.     this.state = {
    
14.       inputValue: '',
    
15.       list: []
    
16.     }
    
17. 
    
18.   }
    
19. 
    
20.   render() {
    
21.     return (
    
22.       <Fragment>
    
23. 
    
24.         <div className="Mytest">
    
25.           <input
    
26.             value={this.state.inputValue}
    
27.             onChange={this.hand.bind(this)}
    
28.             onKeyDown ={this.handleKey.bind(this)}
    
29.             // 这里的 bind(this) 表示在该函数中重新制定该this对象 为 类本身
    
30.             type="text" />
    
31.           <button  onClick={this.handleBtnClick.bind(this) }   >提交</button>
    
32.         </div>
    
33.         <ul>
    
34.           {
    
35.             this.state.list.map((item, index) => {
    
36.               // 如果此处不加 key 值 控制台会给警告： 列表中每个内容都得有个独特的key
    
37.               // 这里这个 bind 里，绑定this  还可以传递一个索引值 index
    
38.               return (
    
39.                 <li key = {index} onClick={this.handleLiClick.bind(this,index)}>
    
40.                    {item}
    
41.                 </li>
    
42.               );
    
43.             })
    
44.           }
    
45. 
    
46.         </ul>
    
47.       </Fragment>
    
48. 
    
49.     );
    
50.   }
    
51. 
    
52.   hand(e) {
    
53.     // 默认接受事件对象 e  ,
    
54.     // e.target 为所操作的Dom
    
55.     // e.target.value 为所操作的value 值
    
56.     console.log(e.target.value)
    
57. 
    
58.     // this.state.inputValue =e.target.value;错误写法
    
59.     // 直接指定this.state 的值 并不能 改变其value的值 ,需要通过this.setState()
    
60.     this.setState({
    
61.       inputValue: e.target.value
    
62.     })
    
63. 
    
64.   }
    
65.   // 回车事件，我自己瞎几把测的
    
66.   handleKey(e)
    
67.   {
    
68.     // console.log(e.keyCode)
    
69.     //
    
70.     if(e.keyCode==13)
    
71.     {
    
72.       this.handleBtnClick();
    
73.     }
    
74.   }
    
75. 
    
76.   // 提交事件
    
77.   handleBtnClick()
    
78.   {
    
79.      this.setState({
    
80.        list:[...this.state.list,this.state.inputValue],
    
81.        inputValue:''
    
82.      })
    
83.      // 这里 虽然视频没讲 ，但是有一个逻辑顺序在里面 就是 从上往下  ，才能实现input 的清空
    
84.   }
    
85. 
    
86. 
    
87. 
    
88.   // 删除事件
    
89.   handleLiClick(index)
    
90.   {
    
91.     let listCopy = [...this.state.list];
    
92.     listCopy.splice(index,1);
    
93.     // 为什么要先复制一份数组呢， 是因为react 有个Immutable 规定 [ 就是在创建新数据时 要保证旧数据仍然可用的规定  ]
    
94.     // Immutable 参考地址 https://www.cnblogs.com/chris-oil/p/8494337.html  
    
95. 
    
96.     this.setState({
    
97.        list:listCopy
    
98.     })
    
99. 
    
100.   }
     
101. 
     
102. 
     
103. 
     
104. }
     
105. 
     
106. export default Mytest;
     

复制代码