React表单

时间 2019-12-06

标签 react 表单栏目 React 繁體版

原文原文链接

React表单

首先，咱们须要搭建一个React环境，用来实现效果：css

先安装React，这里我用的并非最新版本的，因此须要选择一个版本：html

jspm install react@0.14.0-rcl

安装完成后，接着安装一个react-dom：react

jspm install react-dom@0.14.0-rcl

semantic-ui，这个插件并非react必装的，这只是一个样式插件，装不装均可以，可是我这里图个方便就装上了：ajax

jspm install semantic-ui

在这里直接把semantic引入，因此须要安装一个css插件：json

jspm install css

而后用browser-sync建立一个服务器，用来监视一些文件的变化：浏览器

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

这里我用了一个System来导入app底下的mian.js：
服务器

打开main.js，在里面把css样式引进来：app

"use strict";


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

下面是一个简单的排版，来看一下css样式：dom

<div class="ui container" style="padding:30px">
            <div id="app"></div>
</div>

下面咱们就开始正式的编写程序了：

建立一个comment文件，在文件下面建立一个CommentBox.js：jsp

'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 (
            <div className = "ui comments">
                <h1>评论</h1>
                <div className = "ui divider"></div>
                <CommentList data={this.states.data}/>
                <CommentForm onCommentSumit = {this.handleCommentSubmit.bind(this)}/>
            </div>
        );
    }
}
export{CommentBox as default}; //做为一个默认的东西导出；

在网页中显示页面须要在main.js里面导入一些文件：

- html：
<div class="ui container" style="padding:30px">
    <div id="app"></div>
</div>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
    System.impore('app/main');
</script>


- 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(
    <CommentBox url="comments.json" />,
    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 author={comment.author} data={comment.data}>
                    {comment.text}
                </Comment>
            );
        })
        return(
            <div>
                {commentNodes}
            </div>
        );
    }
}


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(
            <from className = "ui reply form" onSubmit = {this.handleSubmit.bind(this)}>
                <div className="field">
                    <input type="text" placeholder="姓名" ref="author"/>
                </div>
                <div className="field">
                    <textarea placeholder="评论" ref="text"></textarea>
                </div>
                <button type="submit" className="ui blue button">
                    添加评论
                </button>
            </from>
        );
    }
}


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 (
            <div className="comment">
                <div className="content">
                    <span className="author">{this.props.author}</span>
                    <div className="metadata">
                        <span className="date">{this.props.date}</span>
                    </div>
                    <div className="text">{this.props.children}</div>
                </div>
            </div>
        );
    }
}
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 author={comment.author} data={comment.data}>
                    {comment.text}
                </Comment>
            );
        })
        return(
            <div>
                {commentNodes}
            </div>
        );
    }
}


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(
            <from className = "ui reply form" onSubmit = {this.handleSubmit.bind(this)}>
                <div className="field">
                    <input type="text" placeholder="姓名" ref="author"/>
                </div>
                <div className="field">
                    <textarea placeholder="评论" ref="text"></textarea>
                </div>
                <button type="submit" className="ui blue button">
                    添加评论
                </button>
            </from>
        );
    }
}

接下来咱们能够把写的内容输出到控制台上：

把提交的内容交给服务端处理：

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

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


        this.setState({data:newComments});
    }
//这个方法就是告诉CommentBox.js，有人提交数据，就把这条数据放在这个方法里面执行一次；