React表單

Coding01 發(fā)布于2019-08-20 18:17 / 3482人閱讀

摘要：從服務(wù)端請求數(shù)據(jù)創(chuàng)建一個文件大胖分鐘前天氣不錯啊騷胖分鐘前出去玩啊老胖分鐘前去哪玩啊從服務(wù)端請求數(shù)據(jù)為了頁面的數(shù)據(jù)和服務(wù)端的保持聯(lián)系，設(shè)置每隔五秒向服務(wù)端發(fā)生一次請求在幫頂一下事件提交表單。。。。

React表單

首先，我們需要搭建一個React環(huán)境，用來實現(xiàn)效果：

先安裝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創(chuàng)建一個服務(wù)器，用來監(jiān)視一些文件的變化：

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

用編輯器打開文件當前所在的目錄：

atom ./

這里我用了一個System來導(dǎo)入app底下的mian.js：

打開main.js，在里面把css樣式引進來：

"use strict";


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

下面是一個簡單的排版，來看一下css樣式：

下面我們就開始正式的編寫程序了：

創(chuàng)建一個comment文件，在文件下面創(chuàng)建一個CommentBox.js：

"use strice";


import React from "react";  //導(dǎo)入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}; //作為一個默認的東西導(dǎo)出；

在網(wǎng)頁中顯示頁面需要在main.js里面導(dǎo)入一些文件：

- 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};

然后頁面就會出現(xiàn)如下效果：

然后定義一個Cmment.js的一個組件，放到CommentList.js里面，然后在從CommentList.js里面?zhèn)鬟f一些數(shù)據(jù)到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};

注釋：這事瀏覽器會顯示一些內(nèi)容，這些內(nèi)容就是從render這個方法里面?zhèn)鬟f給CommentBox.js這個組件，然后再從CommentBox.js傳遞給CommentList.js，在CommentList.js這個組件里面循環(huán)的處理了一下每一條評論的內(nèi)容，每一次都會用一次Comment這個組件，然后把評論的內(nèi)容傳遞給Comment；控制臺就會輸出這些內(nèi)容。

從服務(wù)端請求數(shù)據(jù)：

創(chuàng)建一個Comments.json文件：

[
    {"author":"大胖","date":"5 分鐘前","text":"天氣不錯啊！！！"},
    {"author":"騷胖","date":"3 分鐘前","text":"出去玩啊！！！"},
    {"author":"老胖","date":"1 分鐘前","text":"去哪玩啊！！！"}
]

從服務(wù)端請求數(shù)據(jù)：

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

為了頁面的數(shù)據(jù)和服務(wù)端的保持聯(lián)系，設(shè)置每隔五秒向服務(wù)端發(fā)生一次請求：

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(
            
                
                    
                
                
                    
                
                
            
        );
    }
}

接下來我們可以把寫的內(nèi)容輸出到控制臺上：

把提交的內(nèi)容交給服務(wù)端處理：

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

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


        this.setState({data:newComments});
    }
//這個方法就是告訴CommentBox.js，有人提交數(shù)據(jù)，就把這條數(shù)據(jù)放在這個方法里面執(zhí)行一次；

最后我們就可以評論了：

在評論里面寫上東西，然后點擊提交，內(nèi)容就會輸出上去：