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

資訊專欄INFORMATION COLUMN

react實(shí)現(xiàn)簡單的表單

AWang / 1291人閱讀

摘要：安裝引用插件文件寫數(shù)據(jù)師師分鐘前是啊是撒分鐘前是啊是撒分鐘前是啊是撒評論提交表單剛剛姓名評論添加評論

安裝

jspm
bable
gulp
github
jspm install react@0.14.0-rcl
jspm install react-dom@0.14.0-rcl
jspm install semantic-ui
引用插件 jspm install css
html文件

    
      
        
        react
comments.json
寫數(shù)據(jù)
[
{"author":"師師", "data":"5分鐘前", "text":"是啊是撒"},
{"author":"44", "data":"3分鐘前", "text":"是啊是撒"},
{"author":"44", "data":"3分鐘前", "text":"是啊是撒"}
]
comment.js
"uae strict"

    import React from "react";
    class Comment extends React.Component{
        render(){
            return(
                

                    

                        {this.props.author}
                        

                            {this.props.data}
                        

                        
{this.props.children}

                    

                

            );
        }
    }

export { comment as default};
commentBox.js
"use strict"

import Resct from "react"
import commentlist from "./commentlist";
import commentfrom from "./commentfrom";
import $ from "jquery";

    class CommentBox extends React.Component{
        constructor(props){
            super(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:comment=>{
                    this.setState({data: comments});
                },
                error:(xhr,status,error)=>{
                    console.log(error);
                }
            });
        }
        render(){
            return(
                

                    

                        評論
                    

                    

                        
                        
                    

                

            );
        }
    }
    export {CommentBox as default}
commentform.js
"use strict"；

import React from "react";

class commentfrom extends React.Component{
    handlesubmit(event){
        event.preventDefault();
        console.log("提交表單");
        let author=this.refs.text.value;
            text=this.refs.text.value;

            console.log(anthor,text);
            this.props.onCommentSubmit({author,text,data:"剛剛"});
    }
    render(){
    return(
        
            

                
            

            

                
            

            
        
    )
}
}
export { Commentfrom as default};
commentlist.js
"use strict"；

import React from "react";
import comment from "./comment"

class commentlist extends React.Component{
    render(){
        let commentsNode=this.props.data.map(comment=>{
            return(
                 
                     {comment.text}
                 
                
                );
        })
        return(
            

                {commentNodes}
            

        )
    }
}

export { Commentfrom as default};
main.js
"uae strict"

improt "semantic-ui/semantic.min.css!";
improt React from "react";
improt React from "react-dom";
improt CommentBox from "./comment/commentBox.js";

ReactDom.render(
    ,
    document.getElementById("app")
    )

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

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

相關(guān)文章

  • 快速構(gòu)建高性能表單---JSXForm

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

    WalkerXu 評論0 收藏0

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

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

    Betta 評論0 收藏0

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

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

    LoftySoul 評論0 收藏0

  • [ 一起學(xué)React系列 -- 5 ] 如何優(yōu)雅得使用表單控件

    摘要：假如我們從后臺(tái)拉取一個(gè)數(shù)據(jù)要填入輸入框，那么必須得使用受控組件，因?yàn)榉鞘芸亟M件只能被用戶輸入。不影響正常輸入填充該輸入框的默認(rèn)值，此時(shí)不顯示內(nèi)容。 網(wǎng)頁中使用的form表單大家肯定都再熟悉不過了，它主要作用是用來收集和提交信息。React中的表單組件與我們普通的Html中的表單及其表現(xiàn)形式?jīng)]有什么不同，所以如何使用表單我覺得再拿出來說可能是畫蛇添足、毫無意義。不過再怎么樣也不能辜負(fù)大家...

    Charlie_Jade 評論0 收藏0

  • React中的表單組件

    摘要：對表單元素做了專門的優(yōu)化處理，他對表單元素做了一些抽象，使得他們的使用方式更統(tǒng)一更規(guī)范。約束性和非約束性組件表單里面出來了一個(gè)新的概念叫約束性組件。這樣寫出的來的組件，其值就是用戶輸入的內(nèi)容，完全不管理輸入的過程。約束性組件顯示的是的值。 表單是前端非常重要的一塊內(nèi)容，并且往往包含了錯(cuò)誤校驗(yàn)等邏輯。 React對表單元素做了專門的優(yōu)化處理，他對表單元素做了一些抽象，使得他們的使用方式更...

    canopus4u 評論0 收藏0

發(fā)表評論

0條評論

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