Batch addition and deletion of react. js

The following small series will provide you with a react. js batch addition and deletion function. I think this is quite good. Now I will share it with you and give you a reference. Let's take a look at the following small series to bring you a react. js batch addition and deletion function. I think this is quite good. Now I will share it with you and give you a reference. Let's take a look at it with xiaobian.

Recently, CMS needs to use the batch image adding function: There are two contents in the container box for adding files:Add button and selected file component.

// Delete the content {qiniu} and {deleteQiNiu}. Delete deleteType () {let index = this together with the content on the page. props. index; this. props. callbackParent (index );}

In the container where the component is added

Add addContent () and delete removeContent ()

// Add 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})} // Delete removeContent (index) {if (this. state. number. length <= 1) {return;} this. state. number. splice (index, 1); this. setState ({number: this. state. number })}

Code Analysis:

Add a container for storing Components

{AddToBtn} // Add button {items} // added component

.pBorder {  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%;}

Added components: UploadQiNiuFiles and etype ()

/*** 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 _ upload'; export default class UploadQiNiuFiles extends Component {constructor (props) {super (props );} // obtain qiniukey getQiniuKey (qiniuKey) {this. props. setQiniuKey (qiniuKey);} // obtain qiniutoken getQiniuUptoken () {this. props. acquireToken () ;}; // Delete the content of {qiniu} and {deleteQiNiu}. The content on the page is deleted together, directly bind the component to be deleted // this method calls removeContent (). The following describes deleteType () {let index = this. props. index; this. props. callbackParent (index);} render () {const qiniu = (
        
        
); Const deleteQiNiu = (
        Delete      
); Return (
        
{Qiniu} {deleteQiNiu}
      
);}}

The qiniu Upload Component is introduced. When creating this component, you need to use the action method and the state in worker CERs. Please refer to this link. Because parameters in the orange font need to be obtained using the action Method

Add an event in the container where p is pBorder

First, upload the component UploadQiNiuFiles. Its loading path is webpack's method:

/** Common component paths are abbreviated as: ** for example, config: path. join (_ dirname ,". /build/config. js ") * config variable name * path. join (_ dirname ,". /build/config. js ") config path ** usage: import {Variable} from 'config' * // qiniu uploads public component import QiniuUpload from 'qiniu _ upload '; * **/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';

The component name of the batch upload file, which is defined:UploadFileToFolde

The default parameter is:

Constructor (props) {super (props); this. state = {number: [1], maxNum: 10} // a maximum of 10 data records, 1 by default}

/* Obtain the value passed from the previous page. let local = this. props. location; if the page jumps from (row, query), write the value in the query as follows: let query = local. query; if the page is contained in a large page, you need to pass the query and the corresponding ID */componentDidMount () {let local = this. props. location; let query = local. query; this. props. setActivityId (query. activityId );}

After Data Rendering is complete, you need to execute componentDidUpdate (), which is all data in the state:

This. props. meetingState. addUploadFolderToFileList; determines whether the data is empty or undefined. If this state has a value and is added successfully, all data will be cleared next time on this page and the original page will be returned when you click the Save button. The clearInvitation () method is to clear all the business data, which is written in the action, data is the business data, and written according to the actual situation:

/* CLEAR */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) {// if the addition is successful, all this is cleared before the next addition. props. clearInvitation (); // click the Save button to return to the original page this. props. history. goBack ();}}}

// Batch add and use 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 })}

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

The qiniu Upload Component has a deleteType () deletion method, which calls the removeContent () method and is indispensable. Note that I also put the deleteType () method code here:

// Bind the deleted component and use deleteType () {let index = this. props. index; this. props. callbackParent (index); // call the removeContent () method}

Render () {// The component to be added is defined as the variable into an array items let items = []; // traverses from the number of added components, for (let I = 0; I <this. state. number. length; I ++) {// push the items component to this items. push (
 )} Const addToBtn = (Add); Return (
        
          
Add File
          
{AddToBtn} {items}
        
);}

The above is the details of react. js's batch addition and deletion functions. For more information, see other related articles in the first PHP community!