ホームページ > 記事 > ウェブフロントエンド > React.jsの一括追加・一括削除機能
以下のエディタでは、react.jsの一括追加・一括削除機能に関する記事をお届けします。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。エディターを追って見てみましょう。私が最近構築した CMS には、画像を一括で追加する機能が必要です。ファイルを追加するためのコンテナ ボックスには、
追加ボタンと追加されたファイル選択コンポーネントの 2 つのコンテンツがあります。
構造分析:
追加されたコンポーネントの名前は次のとおりです: UploadQiNiuFiles (Qiniu ファイルアップロードコンポーネント)、これには現在のコンポーネントを削除する削除ボタンが含まれています
追加ボタン イベント
追加されたコンポーネントが保存されるコンテナ この効果を実現するには、次の 3 つのメソッドの目的を理解するだけで済みます:
削除するコンポーネントの deleteType() を直接バインドします。インデックスの削除を呼び出すメソッドの数removeContent()
//删除{qiniu}与{deleteQiNiu}内容,是把页面上的这两个内容一起删除 deleteType(){ let index = this.props.index; this.props.callbackParent(index); }
//批量添加 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 }) }分のコード分析:
Rreeee
<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%; }
Qiniu アップロード コンポーネントが導入されました。このコンポーネントを作成する際には、リデューサー内のアクション メソッドとステートを使用する必要があります。このリンクを参照してください。オレンジ色のフォントでパラメータを取得するには、アクション中のメソッドを使用する必要があるためです
pがpBorderであるコンテナにイベントを追加します
/** * 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条 }
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); }
以上がReact.jsの一括追加・一括削除機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。