TodoList实现增删改查

1、创建TodoList组件

 1 import React from 'react';
 2 
 3 class TodoList extends React.Component{
 4 
 5   //构造方法
 6   constructor(props){
 7     super(props);
 8     this.state = {
 9       list: [
10         '1',
11         '2,
12         '3',
13         '4'
14 15     }
16   }
17 
18   //按钮点击事件方法
19   handleBtnClick(){
20     this.setState({
21       list: [...this.state.list,'hello world'] //...为展开运算符，将this.state.list内容放到当前的list中
22     });
23   }
24 
25   render(){
26     return (
27       <div>
28         <div>
29           <input type="text"></input>
30           <button onClick={this.handleBtnClick.bind(this)}>添加</button>
31         </div>
32         <ul>
33           {/* key属性为唯一值，没有该属性，浏览器会报警告信息，在做添加操作时会出bug */}
34           {this.state.list.map((item,index) => <li key={index}>{item}</li>)}
35         </ul>
36 
37       </div>
38     );
39   }
40 }
41 
42 export default TodoList;

2、构建删除列表元素

 1 import React from 'react';
 2 
 3 class TodoList extends React.Component{
 4 
 5   //构造方法
 6   constructor(props){
 7     super(props);
 8     this.state = {
 9       list: [],  //展示列表
10       inputValue:'' //记录输入框的值
11     }
12   }
13 
14   ////按钮点击事件方法
15   handleBtnClick(){
16     this.setState({
17       list: [...this.state.list,this.state.inputValue], //...为展开运算符，将this.state.list内容放到当前的list中
18       inputValue: '' //点击添加按钮，清空输入框
19     });
20   }
21 
22   //输入框输入事件方法
23   handleInputChange(e){
24     this.setState({
25       inputValue: e.target.value
26     });
27   }
28 
29   //点击展示列表事件方法，用于删除展示元素
30   handleItemClick(index){
31     const list = [...this.state.list];
32     list.splice(index,1
33     this.setState({
34       list: list
35     });
36   }
37 
38   render(){
39     return (
40       <div>
41         <div>
42           <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}></input>
43           <button onClick={this.handleBtnClick.bind(this)}>添加</button>
44         </div>
45         <ul>
46           {this.state.list.map((item,index) => {
47             return <li onClick={this.handleItemClick.bind(this,index)} key={index}>
48                     {item}
49                   </li>
50           })}
51         </ul>
52 
53       </div>
54     );
55   }
56 }
57 
58 export default TodoList;

3、整个案例的代码

 1 mport React, { Component, Fragment } from 'react';
 2 
 3 class TodoList extends Component {
 4 
 5     constructor(props) {
 6         super(props);
 7         this.state = {
 8             inputValue: '',
 9             list: []
10         }
11     }
12 
13     render() {
14         return (
15             <Fragment>
16                 <div>
17                     <input value={this.state.inputValue}
18                         onChange={this.handlerInputChange.bind(this)} />
19                     <button onClick={this.handleBtnClick.bind(this)}>提交</button>
20                 </div>
21                 <ul>
22                     {
23                         this.state.list.map((item, index) => {
24                             return <li key={index} onClick={this.handleItemDelete.bind(this, index)}>{item}</li>
25                         })
26                     }
27                 </ul>
28             </Fragment>
29         )
30     }
31 
32     handlerInputChange(e) {
33         this.setState({
34             inputValue: e.target.value
35         });
36     }
37 
38     handleBtnClick() {
39         this.setState({
40             list: [...this.state.list, this.state.inputValue],
41             inputValue: ''
42         })
43     }
44 
45     handleItemDelete(index) {
46         // console.log(index)
47         // immutable
48         // state不允许我们做任何的改变
49         const list = [...this.state.list]
50         list.splice(index, 1)
51 
52         this.setState({
53             list: list
54         })
55     }
56 
57 }
58 
59 export default TodoList;

4、效果图展示

posted @ 2019-12-24 16:57  Ocean-  阅读(768)  评论(0)    收藏  举报