react组件通信实现表单提交

react组件通信实现表单提交

昨晚做了一个react的例子，主要实现的是提交表单实现评论的功能，在做之前先简单介绍一下React。

React、vue、Angular并称为前端3大框架，就目前来看，尽管Angular发布了4.x也在今年3月份发布了，vue、React更不在话下，大家要是想学习的话可以去官网学习。可以直接点击上方名字，进去学习！

准备

首先我们会应用到react组件，我们需要通过一款管理工具JSPM安装步骤请戳https://segmentfault.com/a/1190000010229588
他是一款es6的管理模块化的工具，大家可以去试试！

起步

在git命令行内进行操作，需要安装git，并且在项目文件下进行启动！

安装react：

jspm install react

安装react-dom

jspm install react-dom

安装一款ui控件

jspm install semantic-ui

jspm插件 css

jspm 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等