浅谈react.js 之 批量添加与删除功能


Posted in Javascript onApril 17, 2017

最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件。

浅谈react.js 之 批量添加与删除功能

结构分析:

被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上传组件),含一个删除当前组件的删除按钮

添加按钮的事件

被添加组件存放的容器

做这个效果只需要明白三个方法的用途就OK:

直接绑定要删除组件的  deleteType(),它是调用删除index数量的方法  removeContent()

//删除{qiniu}与{deleteQiNiu}内容,是把页面上的这两个内容一起删除
  deleteType(){
    let index = this.props.index;
    this.props.callbackParent(index);
  }

在添加组件的容器<div className="divBorder"></div>中,为添加按钮写的 批量添加 addContent()  与删除removeContent()

//批量添加
  addContent(event) {
    if (this.state.number.length >= this.state.maxNum) {
      return;
    }
    console.log("this.state.number:" + this.state.number);
    this.state.number.push(this.state.number[this.state.number.length - 1] + 1);
    let temp = this.state.number;
    this.setState({
      number: temp
    })
  }

  //删除
  removeContent(index) {
    if (this.state.number.length <= 1) {
      return;
    }
    this.state.number.splice(index, 1);
    this.setState({
      number: this.state.number
    })
  }

代码分析:

添加组件存放的容器<div className="divBorder">

<div className="divBorder">
   {addToBtn} //添加按钮
   {items}   //被添加的组件
</div>
.divBorder {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 5%;
  border: 1px solid #e3e3e3;
  padding: 30px 10px;
  margin-bottom: 5%;

  -moz-position: relative;
  -moz-width: 100%;
  -moz-height: auto;
  -moz-border: 1px solid #e3e3e3;
  -moz-padding: 30px 10px;
  -moz-margin-bottom: 5%;
  -webkit-position: relative;
  -webkit-width: 100%;
  -webkit-height: auto;
  -webkit-border: 1px solid #e3e3e3;
  -webkit-padding: 30px 10px;
  -webkit-margin-bottom: 5%;
}

被添加的组件:UploadQiNiuFiles   与  删除组件的方法  deleteType()

 

/**
 * Created by wf on 2016/5/16.
 */
import React,{Component} from 'react';
import {render} from 'react-dom';
import ReactBootstrap , {Input,Button,ButtonToolbar} from 'react-bootstrap';
import style from '../../../../css/meeting_data.css';

//七牛上传公共组件
import QiniuUpload from 'qiniu_uploader';

export default class UploadQiNiuFiles extends Component {
  constructor(props){
    super(props);
  }

  //获取qiniukey
  getQiniuKey(qiniuKey){
    this.props.setQiniuKey(qiniuKey);
  }

  //获取qiniutoken
  getQiniuUptoken() {
    this.props.acquireToken();
  };

  //删除{qiniu}与{deleteQiNiu}内容,是把页面上的这两个内容一起删除,直接绑定要删除的组件
  //这个方法调用的是removeContent(),在下面有介绍
  deleteType(){
    let index = this.props.index;
    this.props.callbackParent(index);
  }

  render(){

    const qiniu = (
      <div className="col-md-8 qiNiuBtn">
        <QiniuUpload containerId="containerId" pickfilesId="pickfilesId" qiniuToken={this.props.meetingState.token} callback={this.getQiniuKey.bind(this)} getQiniuUptoken={this.getQiniuUptoken.bind(this)} />
      </div>
    );

    const deleteQiNiu = (
      <div className="col-md-4">
        <Button bsStyle="danger" className="deleteQiniu" onClick={this.deleteType.bind(this)}>删除</Button>
      </div>

    );

    return(
      <div>
        <div className="uploadBox">
          {qiniu}
          {deleteQiNiu}
        </div>
      </div>
    );
  }
}

 七牛上传组件,巳作介绍,在制作这个组件时,需要用到action的方法与reducers中的state,请参考这个链接。因为橙色字体中的参数的获取是需要用到action中的方法

在div为divBorder的容器内操作添加事件

首先要加载,七牛上传组件:UploadQiNiuFiles,它的加载路径为webpack中的方法:

/**常用组件路径简写为:
  *
  * 例:config: path.join(__dirname,"./build/config.js")
  * config 变量名
  * path.join(__dirname,"./build/config.js") config的路径
  *
  * 使用方法: import {变量} from 'config'
  * //七牛上传公共组件
   import QiniuUpload from 'qiniu_uploader';
  * **/
 resolve: {
  alias: {
   qiniu_uploader: path.join(__dirname,"./public_component/qiniu_upload/QiniuUpload.js"),
   storage: path.join(__dirname,"./utils/Storage.js"),
   config: path.join(__dirname,"./build/config.js")
  }
 }
import React,{Component} from 'react';
import {render} from 'react-dom';
import ReactBootstrap , {Input,Button,ButtonToolbar} from 'react-bootstrap';
import { Link } from 'react-router';
//
import UploadQiNiuFiles from './UploadQiNiuFiles.js';

批量上传文件的组件名称,我定义为:UploadFileToFolde    

默认参数为:

constructor(props){
    super(props);
    this.state = {number: [1], maxNum: 10} //最大数据为10条,默认显示1条
  }
/*获取上个页面传过来的值 let local = this.props.location;
   如果从(row,query)中跳转过来的页面,从query中传值过来要这么写:let query = local.query;
   如果这个页面是包含在某个大的页面下的,要把query与对应的ID传过去
   */
  componentDidMount(){
    let local = this.props.location;
    let query = local.query;
    this.props.setActivityId(query.activityId);
  }

数据渲染完成之后,需要执行componentDidUpdate(),这是state中所有的数据:

this.props.meetingState.addUploadFolderToFileList; 判断这里面的数据是否为空或是undefined。如果这个state有值且新增成功,则下次到这个页面时清空所有的数据并且点击保存按钮时返回到原来的页面。clearInvitation() 的方法是清空所有的业务数据,它的方法写在action中,data是业务数据,根据实际情况写:

/* 清空*/

export const CLEAR_INVITATION = 'CLEAR_INVITATION';
 export function clearInvitation(){
  return {
    type: CLEAR_INVITATION,
    data:{
      addInvitationResponse:{},
      Invitations:[],
      deleteInvitationsResponse:{},
      invitationName:'',
      folderName: ''
    }
  }
}
componentDidUpdate(){
    let addFileToFolderList = this.props.meetingState.addUploadFolderToFileList;
    if (typeof(addFileToFolderList) != 'undefined') {
      let status = addFileToFolderList.status;
      if (200 == status) {
        //如果新增成功,则下次添加前清空所有
        this.props.clearInvitation();
        //点击保存按钮,返回原来的页面
        this.props.history.goBack();
      }
    }
  }
//批量添加,直接拿来使用
  addContent(event) {
    if (this.state.number.length >= this.state.maxNum) {
      return;
    }
    console.log("this.state.number:" + this.state.number);
    this.state.number.push(this.state.number[this.state.number.length - 1] + 1);
    let temp = this.state.number;
    this.setState({
      number: temp
    })
  }
//删除,直接拿来使用
  removeContent(index) {
    if (this.state.number.length <= 1) {
      return;
    }
    this.state.number.splice(index, 1);
    this.setState({
      number: this.state.number
    })
  }

 七牛上传组件中 有个  deleteType() 的删除方法,它调的就是  removeContent() 方法,缺一不可,需要注意,我把这个deleteType()方法代码也放在这里: 

//绑定被删除的组件,直接拿来使用
  deleteType(){
    let index = this.props.index;
    this.props.callbackParent(index); //调用removeContent()方法
  }
render(){
   //将要添加的组件定义为变量为一个数组 items
    let items = [];

   //从添加的组件数量中遍历,
    for(let i = 0; i < this.state.number.length; i++){
    //给这个items推送组件
      items.push(<UploadQiNiuFiles index={i}
                    callbackParent={this.removeContent.bind(this)}
                    key={this.state.number[i]} {...this.props} />)
    }

    
    const addToBtn = (
      <Button bsStyle="primary" onClick={this.addContent.bind(this)}>添加</Button>
    );return (
      <div>
        <div>
          <div className="divTitle">添加文件</div>
          <div className="divBorder">
            {addToBtn}
            {items}
          </div>
        </div></div>
    );
  }

以上这篇浅谈react.js 之 批量添加与删除功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
BootStrap selectpicker
Jun 20 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 #Javascript
老生常谈jacascript DOM节点获取
Apr 17 #Javascript
老生常谈combobox和combotree模糊查询
Apr 17 #Javascript
vue实现简单表格组件实例详解
Apr 16 #Javascript
JavaScript实现网页头部进度条刷新
Apr 16 #Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 #Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 #Javascript
You might like
php中文件上传的安全问题
2006/10/09 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
DBA的职责都有哪些
2012/05/16 面试题
软件工程师面试题
2012/06/25 面试题
关于是否需要写商业计划书
2014/02/07 职场文书
学前班评语大全
2014/05/04 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript