react组件通信实现表单提交

LoftySoul 发布于2019-08-20 18:16 / 685人阅读

摘要：组件通信实现表单提交昨晚做了一个的例子，主要实现的是提交表单实现评论的功能，在做之前先简单介绍一下。并称为前端大框架，就目前来看，尽管发布了也在今年月份发布了，更不在话下，大家要是想学习的话可以去官网学习。

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等

专线服务超融合服务器表单组件 react实现轮播图提交表单表单提交

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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