摘要：从服务端请求数据创建一个文件大胖分钟前天气不错啊骚胖分钟前出去玩啊老胖分钟前去哪玩啊从服务端请求数据为了页面的数据和服务端的保持联系，设置每隔五秒向服务端发生一次请求在帮顶一下事件提交表单。。。。

React表单

首先，我们需要搭建一个React环境，用来实现效果：

先安装React，这里我用的并不是最新版本的，所以需要选择一个版本：

jspm install react@0.14.0-rcl

安装完成后，接着安装一个react-dom：

jspm install react-dom@0.14.0-rcl

semantic-ui，这个插件并不是react必装的，这只是一个样式插件，装不装都可以，但是我这里图个方便就装上了：

jspm install semantic-ui

在这里直接把semantic引入，所以需要安装一个css插件：

jspm install css

然后用browser-sync创建一个服务器，用来监视一些文件的变化：

browser-sync start --server --no-notify --files "index.html. app/**/*.js" 

用编辑器打开文件当前所在的目录：

atom ./

这里我用了一个System来导入app底下的mian.js：

打开main.js，在里面把css样式引进来：

"use strict";


import "semantic-ui/semantic.min.js!";

下面是一个简单的排版，来看一下css样式：

下面我们就开始正式的编写程序了：

创建一个comment文件，在文件下面创建一个CommentBox.js：

"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 (
            

                
评论
                

                
                
            
        );
    }
}
export{CommentBox as default}; //作为一个默认的东西导出；

在网页中显示页面需要在main.js里面导入一些文件：

- html：

    







- 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(
    ,
    document.getElementById("app")
);

然后在页面中就会显示：

接下来我们需要在定义两个组件，来把它们连在一起：

评论列表的组件（CommentList.js）：

"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.text}
                
            );
        })
        return(
            

                {commentNodes}
            
        );
    }
}


export {CommentList as default};

评论表单的组件（CommentForm.js）：

"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(
            
                

                    
                
                

                    
                
                
                    添加评论
                
            
        );
    }
}


export {CommentForm as default};

然后页面就会出现如下效果：

然后定义一个Cmment.js的一个组件，放到CommentList.js里面，然后在从CommentList.js里面传递一些数据到Cmment.js里面：

Cmment.js：

"use strict"


import React from "react";


class Comment extends React.Comment{
    render (){
        return (
            

                

                    {this.props.author}
                    

                        {this.props.date}
                    
                    
{this.props.children}
                
            
        );
    }
}
export {Comment as default};

CommentList.js：

"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.text}
                
            );
        })
        return(
            

                {commentNodes}
            
        );
    }
}


export {CommentList as default};

注释：这事浏览器会显示一些内容，这些内容就是从render这个方法里面传递给CommentBox.js这个组件，然后再从CommentBox.js传递给CommentList.js，在CommentList.js这个组件里面循环的处理了一下每一条评论的内容，每一次都会用一次Comment这个组件，然后把评论的内容传递给Comment；控制台就会输出这些内容。

从服务端请求数据：

创建一个Comments.json文件：

[
    {"author":"大胖","date":"5 分钟前","text":"天气不错啊！！！"},
    {"author":"骚胖","date":"3 分钟前","text":"出去玩啊！！！"},
    {"author":"老胖","date":"1 分钟前","text":"去哪玩啊！！！"}
]

从服务端请求数据：

$.ajax({
    url:this.props.url,
    dataType:"json",
    cache:false,
    success:comments => {
         this.set({data:comments});
    },
    error:(xhr,status,error) => {
        console.log(error);
    }
});

为了页面的数据和服务端的保持联系，设置每隔五秒向服务端发生一次请求：

constructor(props){
        spuer(props);
        this.state = {data:[]};
        this.getComments();
        setInterval(() => this.getComments(),5000);
    }
getComments(){
        $.ajax({
            url:this.props.url,
            dataType:"json",
            cache:false,
            success:comments => {
                this.set({data:comments});
            },
            error:(xhr,status,error) => {
                console.log(error);
            }
        });
    }

在CommentForm.js帮顶一下事件：

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(
            
                

                    
                
                

                    
                
                
                    添加评论
                
            
        );
    }
}

接下来我们可以把写的内容输出到控制台上：

把提交的内容交给服务端处理：

在CommentBox.js上面添加一个方法：

handleCommentSubmit(comment){
        let comments = this.state.data,
         newComments = comments.concat(comment);


        this.setState({data:newComments});
    }
//这个方法就是告诉CommentBox.js，有人提交数据，就把这条数据放在这个方法里面执行一次；

最后我们就可以评论了：

在评论里面写上东西，然后点击提交，内容就会输出上去：