浅谈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 相关文章推荐
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
Vue动态获取width的方法
Aug 22 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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 实用代码收集
2010/01/22 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
基于jquery库的tab新形式使用
2012/11/16 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
使用python爬取B站千万级数据
2018/06/08 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
python 深度学习中的4种激活函数
2020/09/18 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
竞选班长自荐书范文
2014/03/09 职场文书
党校学习心得体会范文
2014/09/09 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
高考学习决心书
2015/02/04 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python
从原生JavaScript到React深入理解
2022/07/23 Javascript