react组件通信实现表单提交
react组件通信实现表单提交
React、vue、Angular并称为前端3大框架,就目前来看,尽管Angular发布了4.x也在今年3月份发布了,vue、React更不在话下,大家要是想学习的话可以去官网学习。可以直接点击上方名字,进去学习! 准备首先我们会应用到react组件,我们需要通过一款管理工具JSPM安装步骤请戳http://www.52php.cn/article/p-nwylftdw-bmq.html 起步在git命令行内进行操作,需要安装git,并且在项目文件下进行启动! 安装react:jspm install react 安装react-domjspm install react-dom 安装一款ui控件jspm install semantic-ui jspm插件 cssjspm install css 监控项目 (jspm必须起一个web环境)browser-sync start --server --no-notify --files 'index.html,js/**/*.js' 我们需要创建下边几个项目目录
在index.html文件中引入我们的文件,创建我们的渲染dom <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.import("js/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="js/comments.json"/>,document.getElementById('app') ); CommentBox.js、CommentList.js、CommentForm、Comment.js模块使我们整个表单的模块,其中commnetBox.js模块使我们的主模块,其他的是我们的区块模板。 CommentList模块'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} date={comment.date}> {comment.text} </Comment> ); }); return ( <div> {commentNodes} </div> ); } } export { CommentList as default}; //加载到默认的模板 comment模板'use strict'; import React from 'react'; class Comment extends React.Component{ render(){ return ( <div className="comment"> <div className="content"> <span className="author">{this.props.author}</span> <div className="metadate"> <span className="date">{this.props.date}</span> </div> <div className="text">{this.props.children}</div> </div> </div> //我们的项目评论区的模板 ) } } export { Comment as default } CommentForm'use strict'; import React from 'react'; class CommentForm extends React.Component{ handleSumbit(event){ event.preventDefault(); console.log("提交表单..."); let author = this.refs.author.value,text= this.refs.text.value; console.log(author,text); this.props.onCommentSubmit({author,text,date:'刚刚'}); } render(){ return ( <form className="ui reply form" onSubmit={this.handleSumbit.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> </form> ) } } export { CommentForm as default}; CommentBox(主文件)这里我们需要引入jquery jspm install jquery "use strict"; import React from 'react'; import CommentList from './CommentList'; import CommentForm from './CommentForm'; import $ from 'jquery'; //可以使用jspm安装jquery class CommentBox extends React.Component{ constructor(props){ super(props); this.state={data:[]}; this.getComments(); //setInterval(()=>this.getComments(),5000); } handleCommentSumit(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.setState({data:comments}); } }) } render() { return ( <div className="ui comments"> <h1>评论</h1> <div className="ui divider"></div> <CommentList data={this.state.data}/> <CommentForm onCommentSubmit={this.handleCommentSumit.bind(this)}/> </div> ); } } export { CommentBox as default }; 我们还需要配置json文件进行模拟项目,上边的方法中我们已经调试! Comments.json[ {"author":"赵晨旭","date":"5 分钟前","text":"天气不错啊!"},{"author":"小雪","date":"3 分钟前","text":"出去玩啊!"},{"author":"小东","date":"2 分钟前","text":"全军出击"} ] 通过这些我们就可以实现React组件间的通信!state、props等 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |