React表單

Coding01 發布于2019-08-20 18:17 / 3477人閱讀

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

React表單

首先，我們需要搭建一個React環境，用來實現效果：

先安裝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創建一個服務器，用來監視一些文件的變化：

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

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

atom ./

這里我用了一個System來導入app底下的mian.js：

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

"use strict";


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

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

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

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

"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 (
            
                評論
                
                
                
            
        );
    }
}
export{CommentBox as default}; //作為一個默認的東西導出；

在網頁中顯示頁面需要在main.js里面導入一些文件：

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

然后頁面就會出現如下效果：

然后定義一個Cmment.js的一個組件，放到CommentList.js里面，然后在從CommentList.js里面傳遞一些數據到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};

注釋：這事瀏覽器會顯示一些內容，這些內容就是從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(
            
                
                    
                
                
                    
                
                
            
        );
    }
}

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

把提交的內容交給服務端處理：

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

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


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

最后我們就可以評論了：

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

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

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

翻譯 | 玩轉 React 表單 —— 受控組件詳解

摘要：受控輸入框只會顯示通過傳入的數據。例如，數組中的元素將會渲染三個單選框或復選框。屬性接收一個布爾值，用來表示組件是否應該被渲染成選中狀態。原文地址：React.js Forms: Controlled Components 原文作者：Loren Stewart 譯者：小 B0Y 校對者：珂珂君本文涵蓋以下受控組件：文本輸入框數字輸入框單選框復選框文本域下拉...

big_cat 2019-08-22 11:05 評論0 收藏0
一個 React Form 組件的重構思路

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

Betta 2019-08-20 15:12 評論0 收藏0
快速構建高性能表單---JSXForm

摘要：實現名稱請輸入名稱類型請輸入類型語法復雜代碼量也比較龐大，說實話，到目前為止，我也沒記住過它的那些方法，最嚴重的問題是存在比較嚴重的性能問題，當表單組件比較多的時間，頁面會卡頓。背景表單問題，不管是在 jQuery 時代，還是 Angular/React 時代，都永遠是前端工程師們的痛，但是這又是沒辦法的事情，業務需求多種多樣，對于中后臺業務而言，表單頁面和報表頁面基本上是中后臺業...

WalkerXu 2019-08-26 13:44 評論0 收藏0
React中受控與非受控組件

摘要：首次發表在個人博客受控組件或都要綁定一個事件每當表單的狀態發生變化都會被寫入組件的中這種組件在中被稱為受控組件在受控組件中組件渲染出的狀態與它的或者向對應通過這種方式消除了組件的局部狀態是的應用的整個狀態可控官方同樣推薦使用受控表單組件總結首次發表在個人博客受控組件 { this.setState({ value: e.target.val...

wenhai.he 2019-08-22 11:16 評論0 收藏0
react組件通信實現表單提交

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

LoftySoul 2019-08-20 18:16 評論0 收藏0
React 奇技淫巧 - defaultValue 和虛擬 dom diff 算法實現表單重置

摘要：根據虛擬的算法，只要改變節點的類型就能促使在的時候重新創建虛擬。不過這個效果依賴于虛擬算法。如果使用時候出現什么副作用，鄙人概不負責。此技巧在寫文章時正處于的版本我們知道 React 的標準模式是單向數據流，而其表單項通常需要監聽 onChange 事件，然后通過改變外部的 value 來回寫表單項的 value，譬如如下 input class App extends React....

paulquei 2019-08-20 16:42 評論0 收藏0