React.js의 일괄 추가 및 삭제 기능

다음 에디터는 React.js의 일괄 추가 및 삭제 기능에 대한 기사를 가져올 것입니다. 에디터가 꽤 좋다고 생각해서 지금 공유해서 참고용으로 올려보겠습니다. 편집기를 따라가서 살펴보겠습니다.

최근 제가 구축한 CMS에는 이미지를 일괄 추가하는 기능이 필요합니다. 파일 추가용 컨테이너 상자에는 다음과 같은 두 가지 콘텐츠가 있습니다. 버튼 추가 및 파일 선택 구성 요소가 추가되었습니다.

구조 분석:

추가된 구성 요소는 UploadQiNiuFiles( Qiniu 파일 업로드 컴포넌트), 현재 컴포넌트를 삭제하는 삭제 버튼

추가 버튼 이벤트

추가된 컴포넌트가 저장되는 컨테이너

이 효과를 얻으려면 세 가지 방법의 목적만 이해하면 됩니다.

직접 바인딩 필요 삭제 컴포넌트의 deleteType()은 컴포넌트가 추가된 컨테이너에서 RemoveContent()

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

를 호출하는 메소드입니다2cf1e8c0f302bbdf5d4025128a4cf4d9< ;/ p>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
    })
  }

코드 분석:

추가 구성 요소 저장용 컨테이너2cf1e8c0f302bbdf5d4025128a4cf4d9

<p className="pBorder">
   {addToBtn} //添加按钮
   {items}   //被添加的组件
</p>

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

추가된 구성 요소: 구성 요소 삭제 방법이 포함된 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 = (
      <p 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)} />
      </p>
    );

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

    );

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

Qiniu 업로드 컴포넌트가 도입되었는데, 이 컴포넌트를 만들 때 With state in 감속기의 액션 메소드를 사용해야 합니다. 이 링크로. 주황색 글꼴로 매개변수를 얻으려면

p가 pBorder인 컨테이너에 이벤트를 추가해야 합니다.

첫 번째 로드, Qiniu 업로드 구성 요소: 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()를 실행해야 합니다. 이 상태의 모든 데이터는 다음과 같습니다.

this.props.meetingState.addUploadFolderToFileList; 해당 데이터가 비어 있는지 또는 정의되지 않았는지 확인합니다. 이 상태에 값이 있고 성공적으로 추가되면 다음에 이 페이지를 방문할 때 모든 데이터가 지워지고 저장 버튼을 클릭하면 원래 페이지로 돌아갑니다. ClearInvitation() 메소드는 모든 비즈니스 데이터를 삭제하는 것입니다. 해당 메소드는 실제 상황에 따라

/* 清空*/

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
    })
  }

Qiniu 업로드 구성 요소에 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 (
      <p>
        <p>
          <p className="pTitle">添加文件</p>
          <p className="pBorder">
            {addToBtn}
            {items}
          </p>
        </p></p>
    );
  }

위 내용은 React.js의 일괄 추가 및 삭제 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!