react實現簡單的表單

時間 2019-12-10

標籤 react 實現簡單表單欄目 React 简体版

原文原文鏈接

安裝css

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文件

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>react</title>
      </head>
      <body>
              <div class="ui containe" style="padding:30px">
                <div id="app">
                    
                </div>
            </div>
    
        <script type="text/bable" src="js/main.js"></script>
        <script src="config.js">
        </script>
        <script>
            System.improt('app/main');
        </script>
      </body>
    </html>

comments.json

寫數據
[
{"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(
                <div className="comment">
                    <div className="content">
                        <span className="author">{this.props.author}</span>
                        <div className="metadata">
                            <span className="data">{this.props.data}</span>
                        </div>
                        <div className="text">{this.props.children}</div>
                    </div>
                </div>
            );
        }
    }

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(
                <div className="ui comments">
                    <h1>
                        評論
                    </h1>
                    <div className="ui divider">
                        <commentlist data={this.state.data}/>
                        <commentfrom onCommentSubmit={this.handleCommentSubmit.bind(this)}/>
                    </div>
                </div>
            );
        }
    }
    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(
        <from className="ui reply from" onSubmit={this.handlesubmit.bind(this)}>
            <div className="field">
                <input type="text" placeholder="姓名" ref="author">
            </div>
            <div class="field">
                <textarea placeholder="評論" ref="text"></textarea>
            </div>
            <button type="submit" class="ui blue button">
                添加評論
            </button>
        </from>
    )
}
}
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 author={comment.author} data={comment.data}>
                     {comment.text}
                 </Comment>
                
                );
        })
        return(
            <div>
                {commentNodes}
            </div>
        )
    }
}

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(
    <CommentBox url="app/comments.json"/>,
    document.getElementById('app')
    )

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。