成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

LoftySoul / 863人閱讀

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

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

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

準(zhǔn)備

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

起步

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

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

我們需要?jiǎng)?chuàng)建下邊幾個(gè)項(xià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模塊使我們整個(gè)表單的模塊，其中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}

                

            

            //我們的項(xiàng)目評(píng)論區(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 (
            

                
評(píng)論

                

                
                
            

        );
    }
}
export { CommentBox as default };

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

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

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

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

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

相關(guān)文章

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

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

    沈建明 評(píng)論0 收藏0

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

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

    Betta 評(píng)論0 收藏0

  • 封裝Vue組件的一些技巧

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

    韓冰 評(píng)論0 收藏0

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

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

    馬永翠 評(píng)論0 收藏0

  • 掌握react，這一篇就夠了

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

    Enlightenment 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

LoftySoul

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<