React表单
React表单
jspm install react@0.14.0-rcl
jspm install react-dom@0.14.0-rcl
jspm install semantic-ui
jspm install css
browser-sync start --server --no-notify --files 'index.html. app/**/*.js'
"use strict"; import 'semantic-ui/semantic.min.js!';
<div class="ui container" style="padding:30px"> <div id="app"></div> </div> 下面我们就开始正式的编写程序了:
'use strice'; import React from 'react'; //导入react; class CommentBox extends React.Component{ constructor(props){ spuer(props); this.state = {data:[]}; this.getComments(); // setInterval(() => this.getComments(),5000); } handleCommentSubmit(comment){ let comments = this.state.data,newComments = comments.concat(comment); this.setState({data:newComments}); } getComments(){ $.ajax({ url:this.props.url,dataType:'json',cache:false,success:comments => { this.set({data:comments}); },error:(xhr,status,error) => { console.log(error); } }); } render(){ return ( <div className = "ui comments"> <h1>评论</h1> <div className = "ui divider"></div> <CommentList data={this.states.data}/> <CommentForm onCommentSumit = {this.handleCommentSubmit.bind(this)}/> </div> ); } } export{CommentBox as default}; //作为一个默认的东西导出;
- html: <div class="ui container" style="padding:30px"> <div id="app"></div> </div> <script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> System.impore('app/main'); </script> - main.js: 'use strict' import 'semantic-ui/semantic.min.css!'; import React from 'react'; import ReactDOM from 'react-dom'; import CommentBox from './comment/CommentBox'; ReactDOM.render( <CommentBox url="comments.json" />,document.getElementById("app") );
'use strict'; import React from 'react'; import Comment from './Comment'; class CommentList extends React.Component{ render(){ let commentNodes = this.props.data.map(comment => { return( <Comment author={comment.author} data={comment.data}> {comment.text} </Comment> ); }) return( <div> {commentNodes} </div> ); } } export {CommentList as default};
'use strict'; import React from 'react'; class CommentForm extends React.Component{ handleSubmit(event){ event.preventDefult(); console.log("提交表单。。。。"); let author = this.refs.author.value,text = this.refs.txte.value; console.log(author,text); this.props.onCommentSubmit({author,text,date:"刚刚"}); } render(){ return( <from className = "ui reply form" onSubmit = {this.handleSubmit.bind(this)}> <div className="field"> <input type="text" placeholder="姓名" ref="author"/> </div> <div className="field"> <textarea placeholder="评论" ref="text"></textarea> </div> <button type="submit" className="ui blue button"> 添加评论 </button> </from> ); } } export {CommentForm as default};
'use strict' import React from 'react'; class Comment extends React.Comment{ render (){ return ( <div className="comment"> <div className="content"> <span className="author">{this.props.author}</span> <div className="metadata"> <span className="date">{this.props.date}</span> </div> <div className="text">{this.props.children}</div> </div> </div> ); } } export {Comment as default};
'use strict'; import React from 'react'; import Comment from './Comment'; //引进Comment.js; class CommentList extends React.Component{ render(){ let commentNodes = this.props.data.map(comment => { return( <Comment author={comment.author} data={comment.data}> {comment.text} </Comment> ); }) return( <div> {commentNodes} </div> ); } } export {CommentList as default}; 注释:这事浏览器会显示一些内容,这些内容就是从render这个方法里面传递给CommentBox.js这个组件,然后再从CommentBox.js传递给CommentList.js,在CommentList.js这个组件里面循环的处理了一下每一条评论的内容,每一次都会用一次Comment这个组件,然后把评论的内容传递给Comment;
[ {"author":"姜姜","date":"5 分钟前","text":"天气不错啊!!!"},{"author":"筱妍","date":"3 分钟前","text":"出去玩啊!!!"},{"author":"吴建","date":"1 分钟前","text":"去哪玩啊!!!"} ]
$.ajax({ url:this.props.url,success:comments => { this.set({data:comments}); },error) => { console.log(error); } });
constructor(props){ spuer(props); this.state = {data:[]}; this.getComments(); setInterval(() => this.getComments(),5000); } getComments(){ $.ajax({ url:this.props.url,error) => { console.log(error); } }); }
class CommentForm extends React.Component{ handleSubmit(event){ event.preventDefult(); console.log("提交表单。。。。"); let author = this.refs.author.value,date:"刚刚"}); } render(){ return( <from className = "ui reply form" onSubmit = {this.handleSubmit.bind(this)}> <div className="field"> <input type="text" placeholder="姓名" ref="author"/> </div> <div className="field"> <textarea placeholder="评论" ref="text"></textarea> </div> <button type="submit" className="ui blue button"> 添加评论 </button> </from> ); } }
handleCommentSubmit(comment){ let comments = this.state.data,newComments = comments.concat(comment); this.setState({data:newComments}); } //这个方法就是告诉CommentBox.js,有人提交数据,就把这条数据放在这个方法里面执行一次; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |