国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

react組件通信實現(xiàn)表單提交

LoftySoul / 787人閱讀

摘要：組件通信實現(xiàn)表單提交昨晚做了一個的例子，主要實現(xiàn)的是提交表單實現(xiàn)評論的功能，在做之前先簡單介紹一下。并稱為前端大框架，就目前來看，盡管發(fā)布了也在今年月份發(fā)布了，更不在話下，大家要是想學(xué)習(xí)的話可以去官網(wǎng)學(xué)習(xí)。

react組件通信實現(xiàn)表單提交 
昨晚做了一個react的例子，主要實現(xiàn)的是提交表單實現(xiàn)評論的功能，在做之前先簡單介紹一下React。

React、vue、Angular并稱為前端3大框架，就目前來看，盡管Angular發(fā)布了4.x也在今年3月份發(fā)布了，vue、React更不在話下，大家要是想學(xué)習(xí)的話可以去官網(wǎng)學(xué)習(xí)。可以直接點(diǎn)擊上方名字，進(jìn)去學(xué)習(xí)！

準(zhǔn)備

首先我們會應(yīng)用到react組件，我們需要通過一款管理工具JSPM安裝步驟請戳https://segmentfault.com/a/1190000010229588
他是一款es6的管理模塊化的工具，大家可以去試試！

起步

在git命令行內(nèi)進(jìn)行操作，需要安裝git，并且在項目文件下進(jìn)行啟動！

安裝react： 
jspm install react
安裝react-dom 
jspm install react-dom
安裝一款ui控件 
jspm install semantic-ui
jspm插件 css 
jspm install css
監(jiān)控項目 (jspm必須起一個web環(huán)境) 
browser-sync start --server --no-notify --files "index.html,js/**/*.js"

我們需要創(chuàng)建下邊幾個項目目錄

在index.html文件中引入我們的文件,創(chuàng)建我們的渲染dom
在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")
);

CommentBox.js、CommentList.js、CommentForm、Comment.js模塊使我們整個表單的模塊，其中commnetBox.js模塊使我們的主模塊，其他的是我們的區(qū)塊模板。
我們需要

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

                {commentNodes}
             

         );
     }
     
 }

 export { CommentList as default}; //加載到默認(rèn)的模板
comment模板 
"use strict";
 import React from "react";

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

                

                    {this.props.author}
                    

                        {this.props.date}
                    

                    
{this.props.children}

                

            

            //我們的項目評論區(qū)的模板
        )
     }
 }

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 (
             

               

                    
               

               

                    
               

                   
            

         )
     }
     
 }

 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 (
            

                
評論

                

                
                
            

        );
    }
}
export { CommentBox as default };

我們還需要配置json文件進(jìn)行模擬項目，上邊的方法中我們已經(jīng)調(diào)試！

Comments.json 
[      
    {"author":"趙晨旭","date":"5 分鐘前","text":"天氣不錯啊!"},
    {"author":"小雪",  "date":"3 分鐘前","text":"出去玩啊!"},
    {"author":"小東",  "date":"2 分鐘前","text":"全軍出擊"}
]

通過這些我們就可以實現(xiàn)React組件間的通信！state、props等

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84273.html

相關(guān)文章

  • 前端MVVM模式及其在Vue和React中的體現(xiàn)

    摘要：在模式中一般把層算在層中，只有在理想的雙向綁定模式下，才會完全的消失。層將通過特定的展示出來，并在控件上綁定視圖交互事件，一般由框架自動生成在瀏覽器中。三大框架的異同三大框架都是數(shù)據(jù)驅(qū)動型的框架及是雙向數(shù)據(jù)綁定是單向數(shù)據(jù)綁定。 MVVM相關(guān)概念 1） MVVM典型特點(diǎn)是有四個概念：Model、View、ViewModel、綁定器。MVVM可以是單向綁定也可以是雙向綁定甚至是不綁...

    沈建明 評論0 收藏0

  • 一個 React Form 組件的重構(gòu)思路

    摘要：本文發(fā)布于我的博客最近對團(tuán)隊內(nèi)部組件庫中的組件進(jìn)行了重構(gòu)，記錄一下思考的過程。暴露對外提供整個表單狀態(tài)的方法通過在外監(jiān)聽每次觸發(fā)的事件來獲取整個的狀態(tài)。子表單數(shù)量或類型發(fā)生變化時當(dāng)下面子組件被添加或刪除時，需要及時更新的結(jié)構(gòu)。 本文發(fā)布于 我的博客 最近對團(tuán)隊內(nèi)部 React 組件庫（ne-rc）中的 Form 組件進(jìn)行了重構(gòu)，記錄一下思考的過程。 一些前置定義： 名詞 定義 ...

    Betta 評論0 收藏0

  • 封裝Vue組件的一些技巧

    摘要：根據(jù)組件單向數(shù)據(jù)流和和事件通信機(jī)制，需要由子組件通過事件通知父組件，并在父組件中修改原始的數(shù)據(jù)，完成狀態(tài)的更新。 本文同步在個人博客shymean.com上，歡迎關(guān)注 寫Vue有很長一段時間了，除了常規(guī)的業(yè)務(wù)開發(fā)之外，也應(yīng)該思考和反思一下封裝組件的正確方式。以彈窗組件為例，一種實現(xiàn)是在需要模板中引入需要彈窗展示的組件，然后通過一個flag變量來控制彈窗的組件，在業(yè)務(wù)代碼里面會充斥著冗余的彈...

    韓冰 評論0 收藏0

  • 【全棧React】第10天: 交互性

    摘要：我們可以使用函數(shù)構(gòu)造函數(shù)將我們的組件轉(zhuǎn)換為狀態(tài)什么是函數(shù)構(gòu)造函數(shù)在中，函數(shù)是一個在創(chuàng)建對象時運(yùn)行的函數(shù)。我們將使用構(gòu)造函數(shù)方法在對象創(chuàng)建時正確運(yùn)行對象時設(shè)置實例變量。每當(dāng)一個有一個屬性被設(shè)置時，它會在該字段改變的每個時間調(diào)用函數(shù)。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3823原文：https://www.fullsta...

    馬永翠 評論0 收藏0

  • 掌握react，這一篇就夠了

    摘要：小明小明兒子，可以看到組件顯示了父組件的。小明受控組件和非受控組件受控組件和非受控組件這些都是指的表單組件，當(dāng)一個表單的值是通過改變的而不是通過是受控組件，否則就是非受控組件。 react眾所周知的前端3大主流框架之一，由于出色的性能，完善的周邊設(shè)施風(fēng)頭一時無兩。本文就帶大家一起掌握react。 jsx語法 前端MVVM主流框架都有一套自己的模板處理方法，react則使用它獨(dú)特的jsx...

    Enlightenment 評論0 收藏0

發(fā)表評論

0條評論

LoftySoul

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<