react組件通信實現表單提交

LoftySoul 發布于2019-08-20 18:16 / 786人閱讀

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

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

在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模塊使我們的主模塊，其他的是我們的區塊模板。
我們需要

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}; //加載到默認的模板

comment模板

"use strict";
 import React from "react";

 class Comment extends React.Component{
     render(){
        return (
            
                
                    {this.props.author}
                    
                        {this.props.date}
                    
                    {this.props.children}
                
            
            //我們的項目評論區的模板
        )
     }
 }

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文件進行模擬項目，上邊的方法中我們已經調試！

Comments.json

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

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

GPU云服務器云服務器表單組件 react實現輪播圖提交表單表單提交

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84273.html

前端MVVM模式及其在Vue和React中的體現

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

沈建明 2019-08-23 12:36 評論0 收藏0
一個 React Form 組件的重構思路

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

Betta 2019-08-20 15:12 評論0 收藏0
封裝Vue組件的一些技巧

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

韓冰 2019-05-23 17:35 評論0 收藏0
【全棧React】第10天: 交互性

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

馬永翠 2019-08-20 18:33 評論0 收藏0
掌握react，這一篇就夠了

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

Enlightenment 2019-08-23 11:45 評論0 收藏0