React.jsの一括追加・一括削除機能

以下のエディタでは、react.jsの一括追加・一括削除機能に関する記事をお届けします。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。エディターを追って見てみましょう。私が最近構築した CMS には、画像を一括で追加する機能が必要です。ファイルを追加するためのコンテナ ボックスには、

追加ボタンと追加されたファイル選択コンポーネントの 2 つのコンテンツがあります。

構造分析:

追加されたコンポーネントの名前は次のとおりです: UploadQiNiuFiles (Qiniu ファイルアップロードコンポーネント)、これには現在のコンポーネントを削除する削除ボタンが含まれています

追加ボタン イベント

追加されたコンポーネントが保存されるコンテナ この効果を実現するには、次の 3 つのメソッドの目的を理解するだけで済みます:

削除するコンポーネントの deleteType() を直接バインドします。インデックスの削除を呼び出すメソッドの数removeContent()

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

追加したコンポーネントのコンテナ

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

分のコード分析:

追加されたコンテナー & lt; p className = "pborder" & gt;

Rreeee

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

コンポーネント: Uploadqiniufiles と削除コンポーネント、DeleTetype ( )

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

Qiniu アップロード コンポーネントが導入されました。このコンポーネントを作成する際には、リデューサー内のアクション メソッドとステートを使用する必要があります。このリンクを参照してください。オレンジ色のフォントでパラメータを取得するには、アクション中のメソッドを使用する必要があるためです

pがpBorderであるコンテナにイベントを追加します

まず第一に、Qiniuアップロードコンポーネント：UploadQiNiuFilesをロードする必要があります。そのロードパスはwebpackメソッドにあります:

/**
 * 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>
    );
  }
}

/**常用组件路径简写为：
  *
  * 例：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")
  }
 }

バッチアップロードファイルのコンポーネント名。次のように定義します:

UploadFileToFolde

デフォルトのパラメータは次のとおりです:

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';

constructor(props){
    super(props);
    this.state = {number: [1], maxNum: 10} //最大数据为10条，默认显示1条
  }

データレンダリング後完了したら、componentDidUpdate() を実行する必要があります。これは、状態内のすべてのデータです。

this.props.meetingState.addUploadFolderToFileList; 内のデータが空か未定義かを確認します。この状態に値があり、正常に追加された場合、次回このページにアクセスしたときにすべてのデータがクリアされ、保存ボタンをクリックすると元のページに戻ります。 ClearInvitation()メソッドは、アクション内にビジネスデータを記述します。

/*获取上个页面传过来的值 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);
  }

Qiniu アップロード コンポーネントには、removeContent() メソッドを呼び出す deleteType() 削除メソッドがあります。どちらも必須です。ここに deleteType() メソッド コードも記述していることに注意してください。リーリー

以上がReact.jsの一括追加・一括削除機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。