學習react-簡單小案例(5)--綜合案例
阿新 • • 發佈：2017-12-05
edi htm document turn reat prop comment creat ops
<html> <head> <title></title> <meta charset="UTF-8"/> <script src="js/react.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/browser.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .bodystyle{ width: 100%; height: 100%; background: brown; } .borderstyle{ border:1px solid #ccc; background: #ffffff; width: 200px; margin: 10px; float: left; height: 80px; } textarea{ width: 100%; } </style> </head> <body><div id="container"></div> </body> <script type="text/babel"> //父級DIV var Demo = React.createClass({ //初始化 getInitialState:function(){ return ({ datas:[] }); }, updateComment:function(newText,i){ var arr = this.state.datas; arr[i] = newText; this.setState({datas:arr}); }, delComment:function(i){ var arr = this.state.datas; arr.splice(i,1); this.setState({datas:arr}); }, eachComment:function(text,i){ return ( <Crud delCommentText={this.delComment} updateCommentText={this.updateComment} key={i} index={i}> {text} </Crud> ) }, add:function(text){ var arr = this.state.datas; arr.push(text); this.setState({datas:arr}); }, render:function(){ return( <div> <div> <button onClick={this.add.bind(null,"Hello world")}>添加</button> </div> <div className="bodystyle"> {this.state.datas.map(this.eachComment)} </div> </div> ); } }); //子級DIV var Crud = React.createClass({ getInitialState:function(){ return ({ edit:false }); }, edit:function(){ this.setState({edit:true}) }, del:function(){ this.props.delCommentText(this.props.index) }, save:function(){ var val = this.refs.newText.value; this.props.updateCommentText(val,this.props.index) this.setState({edit:false}) }, rederNormal:function(){ return ( <div className="borderstyle"> <div>{this.props.children}</div> <button onClick={this.edit}>編輯</button> <button onClick={this.del}>刪除</button> </div> ); }, rederForm:function(){ return ( <div className="borderstyle"> <textarea ref="newText" defaultValue={this.props.children}></textarea> <button onClick={this.save}>更新</button> </div> ); }, render:function(){ if(this.state.edit){ return this.rederForm() }else{ return this.rederNormal() } } }); ReactDOM.render( <Demo />, document.getElementById(‘container‘) ); </script> </html>
學習react-簡單小案例(5)--綜合案例