基于react的简单TODOList

前段时间看了下react，写个栗子记录

页面效果如下

效果：展示代办事件，正文加了删除线的是已经完成的，未加横杠的是未完成的，

交互：1、在input里面输入新添加的内容，点击Add按钮添加代办事件

　　　2、点击事件toggle完成状态

　　　3、切换显示已完成，未完成，全部

代码如下：

1、页面基本架子的引入

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>todoList</title>
 6     <script src="react-demos-master/build/react.js"></script>
 7     <script src="react-demos-master/build/react-dom.js"></script>
 8     <script src="react-demos-master/build/browser.min.js"></script>
 9 </head>
10 <body>
11     <div id="todoList"></div>
12 </body>
13 </html>

2、一些原有的todo

1 var items = [
2       {text:'Sth1',id:1,statue:false},
3       {text:'Sth2',id:2,statue:true},
4       {text:'Sth3',id:3,statue:true},
5       {text:'Sth4',id:4,statue:true}
6     ]

3、页面的jsx

　　3.1、基本外层元素

 1   var id = 10;
 2   var TodoApp = React.createClass({
 3     getInitialState:function(){
 4       return {
 5           items:[]
 6       }
 7     },
 8     componentDidMount:function(){
 9       this.setState({items:items})
10     },
11     handleSubmit:function(e){
12       items.push({
13         text:this.refs.myTextInput.value,
14         id:id++,
15         statue:false
16       });
17       this.setState({items:items});
18       this.refs.myTextInput.value = "";
19       e.preventDefault();
20     },
21     showState:function(type){
22      var filterItems = [];
23       if(type == "all"){
24         filterItems = items
25       }else{
26         filterItems=items.filter((v)=>{
27           return v.statue == eval(type);
28         })
29       }
30       this.setState({items:filterItems})
31     },
32     render:function(){
33         return (
34           <div>
35             <TodoList list = {this.state.items}/>
36             <form onSubmit={this.handleSubmit}>
37               <input type="text" ref="myTextInput" onChange={this.handleChange}/>
38               <input type="submit" value="Add" onClick={this.handleSubmit} />
39             </form>
40             <Footer showState={this.showState}/>
41           </div>
42         )
43     }
44   })
45   ReactDOM.render(<TodoApp items={items} />, todoList);

在这里主要涉及了，

(1)state(组件可变属性)和props（组件不可变属性）的使用；

(2)refs获取真正的DOM节点；

(3)UI组件颗粒度尽量小，方便重用；

　　3.2显示list的jsx

 1  var TodoListItem = React.createClass({    
 2     getInitialState:function(){
 3       return {
 4         statue:this.props.statue
 5       }
 6     },
 7     toggleState:function(){
 8       this.setState({statue:!this.state.statue})
 9     },
10     render:function(){
11       if(!this.state.statue){
12         return (
13           <li onClick={this.toggleState}>{this.props.text}</li>
14        )
15       }else{
16         return (
17           <li onClick={this.toggleState}><s>{this.props.text}</s></li>
18        )
19       }
20      
21     }
22   });
23   var TodoList = React.createClass({
24     render:function(){          
25         var listItem = this.props.list.map(function(item){
26            return <TodoListItem key={item.id} text={item.text} statue = {item.statue}></TodoListItem>
27         })
28         return (
29           <ul>
30             {listItem}
31           </ul>
32         )
33     }
34   });

　　3.3 filter功能部分的jsx

 1   var FilterLink = React.createClass({
 2     render:function(){          
 3         return (
 4           <a href="javascript:void(0)" onClick={this.props.onClick.bind(null,this.props.filter)}>{this.props.text}</a>
 5         )
 6     }
 7   });
 8   var Footer = React.createClass({
 9     render:function(){          
10         return (
11           <div>
12             <p>Filter:</p>
13             Done:
14             <FilterLink filter="true" text="Done" onClick={this.props.showState} />;
15             noDone:
16             <FilterLink filter="false" text="noDone" onClick={this.props.showState} />;
17             All:
18             <FilterLink filter="all" text="All" onClick={this.props.showState} />;
19           </div>
20         )
21     }
22   });

例子的全部代码如下

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <script src="react-demos-master/build/react.js"></script>
  5     <script src="react-demos-master/build/react-dom.js"></script>
  6     <script src="react-demos-master/build/browser.min.js"></script>
  7   </head>
  8   <body>
  9     <div id="todoList"></div>
 10     
 11   <script>
 12     var items = [
 13       {text:'Sth1',id:1,statue:false},
 14       {text:'Sth2',id:2,statue:true},
 15       {text:'Sth3',id:3,statue:true},
 16       {text:'Sth4',id:4,statue:true}
 17     ]
 18   </script>
 19   <script type="text/babel">
 20   var TodoListItem = React.createClass({    
 21     getInitialState:function(){
 22       return {
 23         statue:this.props.statue
 24       }
 25     },
 26     toggleState:function(){
 27       this.setState({statue:!this.state.statue})
 28     },
 29     render:function(){
 30       if(!this.state.statue){
 31         return (
 32           <li onClick={this.toggleState}>{this.props.text}</li>
 33        )
 34       }else{
 35         return (
 36           <li onClick={this.toggleState}><s>{this.props.text}</s></li>
 37        )
 38       }
 39      
 40     }
 41   });
 42   var TodoList = React.createClass({
 43     render:function(){          
 44         var listItem = this.props.list.map(function(item){
 45            return <TodoListItem key={item.id} text={item.text} statue = {item.statue}></TodoListItem>
 46         })
 47         return (
 48           <ul>
 49             {listItem}
 50           </ul>
 51         )
 52     }
 53   });
 54   var FilterLink = React.createClass({
 55     render:function(){          
 56         return (
 57           <a href="javascript:void(0)" onClick={this.props.onClick.bind(null,this.props.filter)}>{this.props.text}</a>
 58         )
 59     }
 60   });
 61   var Footer = React.createClass({
 62     render:function(){          
 63         return (
 64           <div>
 65             <p>Filter:</p>
 66             Done:
 67             <FilterLink filter="true" text="Done" onClick={this.props.showState} />;
 68             noDone:
 69             <FilterLink filter="false" text="noDone" onClick={this.props.showState} />;
 70             All:
 71             <FilterLink filter="all" text="All" onClick={this.props.showState} />;
 72           </div>
 73         )
 74     }
 75   });
 76 
 77   var id = 10;
 78   var TodoApp = React.createClass({
 79     getInitialState:function(){
 80       return {
 81           items:[]
 82       }
 83     },
 84     componentDidMount:function(){
 85       this.setState({items:items})
 86     },
 87     handleSubmit:function(e){
 88       items.push({
 89         text:this.refs.myTextInput.value,
 90         id:id++,
 91         statue:false
 92       });
 93       this.setState({items:items});
 94       this.refs.myTextInput.value = "";
 95       e.preventDefault();
 96     },
 97     showState:function(type){
 98      var filterItems = [];
 99       if(type == "all"){
100         filterItems = items
101       }else{
102         filterItems=items.filter((v)=>{
103           return v.statue == eval(type);
104         })
105       }
106       this.setState({items:filterItems})
107     },
108     render:function(){
109         return (
110           <div>
111             <TodoList list = {this.state.items}/>
112             <form onSubmit={this.handleSubmit}>
113               <input type="text" ref="myTextInput" onChange={this.handleChange}/>
114               <input type="submit" value="Add" onClick={this.handleSubmit} />
115             </form>
116             <Footer showState={this.showState}/>
117           </div>
118         )
119     }
120   })
121   ReactDOM.render(<TodoApp items={items} />, todoList);
122   </script>
123   </body>
124 </html>

View Code

有时间再写个用redux来管理数据的TODOList的例子吧（希望自己别太懒）

posted on 2017-05-25 10:35 peace_1 阅读(494) 评论(0) 编辑收藏举报