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样式：<div class="ui container" style="padding:30px">            <div ></div></div>下面我们就开始正式的编写程序了：创建一个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 (        <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}; //作为一个默认的东西导出；在网页中显示页面需要在main.js里面导入一些文件：- html：<div class="ui container" style="padding:30px">    <div ></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"));然后在页面中就会显示：接下来我们需要在定义两个组件，来把它们连在一起：评论列表的组件（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 author={comment.author} data={comment.data}>                    {comment.text}                </Comment>            );        })        return(            <div>                {commentNodes}            </div>        );    }}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(        <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};然后页面就会出现如下效果：然后定义一个Cmment.js的一个组件，放到CommentList.js里面，然后在从CommentList.js里面传递一些数据到Cmment.js里面：Cmment.js：'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};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 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；控制台就会输出这些内容。从服务端请求数据：创建一个Comments.json文件：[    {"author":"彦文","date":"5 分钟前","text":"有美女！！！"},    {"author":"xiao","date":"3 分钟前","text":"约会！！！"},    {"author":"老胖","date":"1 分钟前","liang":"抽烟！！！"}]从服务端请求数据：$.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(        <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>    );}}    接下来我们可以把写的内容输出到控制台上：    把提交的内容交给服务端处理：    在CommentBox.js上面添加一个方法：    handleCommentSubmit(comment){            let comments = this.state.data,             newComments = comments.concat(comment);        this.setState({data:newComments});    }

//这个方法就是告诉CommentBox.js，有人提交数据，就把这条数据放在这个方法里面执行一次；
最后我们就可以评论了：
在评论里面写上东西，然后点击提交，内容就会输出上去：