前段时间看了下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>
有时间再写个用redux来管理数据的TODOList的例子吧（希望自己别太懒）