React表單

時間 2019-12-06

標籤 react 表單欄目 React 简体版

原文原文鏈接

React表單

首先，咱們須要搭建一個React環境，用來實現效果：css

先安裝React，這裏我用的並非最新版本的，因此須要選擇一個版本：html

jspm install react@0.14.0-rcl

安裝完成後，接着安裝一個react-dom：react

jspm install react-dom@0.14.0-rcl

semantic-ui，這個插件並非react必裝的，這只是一個樣式插件，裝不裝均可以，可是我這裏圖個方便就裝上了：ajax

jspm install semantic-ui

在這裏直接把semantic引入，因此須要安裝一個css插件：json

jspm install css

而後用browser-sync建立一個服務器，用來監視一些文件的變化：瀏覽器

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

這裏我用了一個System來導入app底下的mian.js：
服務器

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

"use strict";


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

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

<div class="ui container" style="padding:30px">
            <div id="app"></div>
</div>

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

建立一個comment文件，在文件下面建立一個CommentBox.js：jsp

'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 id="app"></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":"筱妍","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(
            <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，有人提交數據，就把這條數據放在這個方法裏面執行一次；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。