ホームページ  >  記事  >  ウェブフロントエンド  >  React.jsの一括追加・一括削除機能

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

零下一度
零下一度オリジナル
2017-04-17 12:02:162259ブラウズ

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

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

構造分析:

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

追加ボタン イベント

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

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

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

追加したコンポーネントのコンテナ2cf1e8c0f302bbdf5d4025128a4cf4d994b3e26ee717c64999d7867364b1b4a3に、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 &#39;react&#39;;
import {render} from &#39;react-dom&#39;;
import ReactBootstrap , {Input,Button,ButtonToolbar} from &#39;react-bootstrap&#39;;
import style from &#39;../../../../css/meeting_data.css&#39;;

//七牛上传公共组件
import QiniuUpload from &#39;qiniu_uploader&#39;;

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 &#39;config&#39;
  * //七牛上传公共组件
   import QiniuUpload from &#39;qiniu_uploader&#39;;
  * **/
 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 &#39;react&#39;;
import {render} from &#39;react-dom&#39;;
import ReactBootstrap , {Input,Button,ButtonToolbar} from &#39;react-bootstrap&#39;;
import { Link } from &#39;react-router&#39;;
//
import UploadQiNiuFiles from &#39;./UploadQiNiuFiles.js&#39;;

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。