当前位置：首页 > Web前端 > HTML5

Reactform

时间：2023-04-05 18:00:38 HTML5

Reactform首先我们需要搭建一个React环境来实现效果：首先安装React，这里我使用的不是最新版本，所以需要选择一个版本：jspminstallreact@0.14.0-rcl安装完成后，再安装一个react-dom：jspminstallreact-dom@0.14.0-rclsemantic-ui，这个插件不是react必须的，只是一个样式插件，安装即可有没有，不过这是我的图安装很简单：jspminstallsemantic-ui这里直接引入了semantic，所以需要安装一个css插件：jspminstallcss然后使用browser-sync创建一个server来监听一些文件变化：browser-syncstart--server--no-notify--files'index.html.app/**/*.js'用编辑器打开文件当前所在目录：atom./这里我用一个System导入app下的mian.js：打开main.js，导入里面的css样式："usestrict";导入“语义-ui/semantic.min.js！”；下面是一个简单的布局，我们来看看css样式：

现在我们开始正式写程序：创建注释文件，创建CommentBox.js:'usestrict';从“反应”导入反应；//导入反应；类CommentBox扩展React.Component{constructor(props){spuer(props);this.state={数据：[]}；这个.getComments();//setInterval(()=>this.getComments(),5000);}handleCommentSubmit(comment){letcomments=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});},错误:(xhr,status,error)=>{console.log(error);}});}render(){return(

评论

);}}export{默认为CommentBox};//默认导出；在网页中显示页面main.js中需要导入一些文件：-html:-main.js:'usestrict'import'semantic-ui/semantic.min.css!';importReactfrom'react'；从'react-dom'导入ReactDOM；从'./comment/CommentBox'导入CommentBox；ReactDOM.render(,document.getElementById("app"));然后在页面上显示：接下来，我们需要定义两个组件将它们连接在一起：评论列表组件（CommentList.js）：'usestrict';importReactfrom'react';importCommentfrom'./Comment';classCommentListextendsReact.Component{render(){letcommentNodes=this.props.data.map(comment=>{return({comment.text});})返回(

{commentNodes}

);}}export{默认为CommentList};评论表单组件(CommentForm.js):'usestrict';从“反应”导入反应；类CommentForm扩展React.Component{handleSubmit(event){event.preventDefult();console.log("提交表单...");letauthor=this.refs.author.value,text=this.refs.txte.value;console.log(author,text);this.props.onCommentSubmit({author,text,date:"刚才"});}render(){return(AddComment);}}export{CommentFormasdefault};那么页面会有如下效果：然后定义一个Cmment.js的组件，放到CommentList中.js里面，然后从CommentList.js传一些数据给Cmment.js：Cmment.js:'usestrict'importReactfrom'react';classCommentextendsReact.Comment{render(){return({this.props.author}{this.props.date}{this.props.children}>);}}export{Commentasdefault};CommentList.js：'usestrict';importReactfrom'react';importCommentfrom'./Comment';//引入Comment.js；classCommentListextendsReact.Component{render(){letcommentNodes=this.props.data.map(comment=>{return({comment.text});})返回(

{commentNodes}

);}}export{默认为CommentList};注意：浏览器会显示一些内容，这些内容是从render方法传递给CommentBox.js组件，从CommentBox.js传递给CommentList.js。在CommentList.js组件中，每条评论的内容都是循环处理的。每次都会用到Comment组件，然后将评论的内容传递给Comment；控制台将输出这些向服务器请求数据：创建一个Comments.json文件：[{"author":"大胖子","date":"5分钟前","text":"天气真好！！！"},{"author":"骚胖子","date":"3分钟前","text":"出去玩吧！！！"},{"author":"老胖子","date":"1minuteago","text":"哪里玩！！！"}]从服务器请求数据：$.ajax({url:this.props.url,dataType:'json',cache:false,success:comments=>{this.set({data:comments});},错误:(xhr,status,error)=>{console.log(error);}});为了让页面和服务器的数据保持联系，设置每五秒向服务器发起一次请求：constructor(props){spuer(props);this.state={数据：[]}；this.getComments();setInterval(()=>this.getComments(),5000);}getComments(){$.ajax({url:this.props.url,dataType:'json',cache:false,success:comments=>{this.set({data:comments});},错误:(xhr,status,error)=>{console.log(error);}});帮助CommentForm.js中的事件：classCommentFormextendsReact.Component{handleSubmit(event){event.preventDefult();console.log("提交表单...");letauthor=this.refs.author.value,text=this.refs.txte.value;console.log(author,text);this.props.onCommentSubmit({author,text,date:"刚才"});}render(){return(添加评论);}}接下来我们可以将写入的内容输出到控制台：将提交的内容交给服务器处理：在CommentBox.js上添加一个方法：handleCommentSubmit(comment){letcomments=this.state.data,newComments=comments.concat(comme新台币);this.setState({data:newComments});}//这个方法是告诉CommentBox.js，如果有人提交了数据，把这个数据放到这个方法里面，执行一次；最后我们可以评论了：在评论里写点东西，然后点击提交，就会输出内容：

上一篇：ES8新特性

下一篇：Node.js系列-http

Reactform相关文章

最新推荐

猜你喜欢