Reactマウスの複数選択機能の設定方法

Reactマウスの複数選択機能の設定方法

一般的に、リストには選択機能があり、単一選択、二重選択、複数選択が非常に一般的です。カスタム ループ リストと画像では、マウスによる単一選択、複数選択、逆選択機能を実装します。

# React マウスマルチプル
# React マウス複数選択コンポーネント

React マウス マルチ選択コンポーネント

制限

> 主にマウスの複数選択の効果を実現します。元のリストを破壊することなく、埋め込まれたコンポーネントはマウスの複数選択機能を備えています。

npm パッケージ アドレス [リンク](https://www.npmjs.com/package/mousemultiples)

インストール

npm と マウスマルチプル

構成項目の使用

/**
 * wrapperScroll?: any, // スクロール単位 'ID';
 *
  * itemClass: string, // リストボックスの一般的な持ち運びクラス
 *
  * activeClass?: string, // リストボックスの選択クラス
 *
  * isDataChange: any, // レンダリングされた配列、データの変更を検出 *
  * activePosition?: any, // データをアクティブに選択する *
  * onSelected: (pos: any, item: any, data: any) => void, // ドラッグ *
  * onSingleSelected?: (pos: any, item: any, data: any) => void, // クリック *
  * 注: itemClass と子ループ ボックスの className は一貫している必要があり、同じボックスが data-position にバインドされ、選択された一意の ID がエクスポートされる必要があります。 * 注: 疑問符の付いた項目はオプションです。それ以外の場合は必須です。
 */

> 操作手順:
> マウスクリック、単一選択
> Ctrl + マウスクリック、複数選択、選択チェック、選択反転
> Ctrl + a すべて選択
> マウスをドラッグして複数の範囲を選択します

例:

<マウスマルチプル
    wrapperScroll="classify-img_body"
    アイテムクラス='選択ボックス'
    activeClass='選択ボックスアクティブ'
    アクティブポジション={アクティブポジション}
    onSelected={選択済み}
    isDataChange={画像リスト}
    {imageLists.map(item => {
        戻る (
            <div 
            クラス名="選択ボックス" 
            データ位置={item.FileId}
            >
                <div className="listImage"><img src={ item.FileUrl } /></div>
            </div>
        )
    })}
</マウス複数>

> 説明:

> 子供向けのカスタムデザイン、スタイル、グリッド、選択効果など。

> コンポーネントをインポートし、設計されたリストを直接ラップし、className と itemClass が一貫していることを確認し、data-position をインポートし、activeClass に強調表示されたスタイルがあることを確認します。 。 。

以上がReactマウスマルチ選択機能の詳しい内容です。Reactマウスマルチ選択の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JS で react-tooltip プラグインを使用してマウスホバーボックスを表示する
  • ReactJSはフォームで単一選択、複数選択、逆選択の例を実装します

<<:  MySQL 5.7.18 アーカイブ圧縮版のインストールチュートリアル

>>:  Dockerでイメージを削除する方法

推薦する

ポップアップウィンドウの上下中央左右と透明な背景のロックウィンドウ効果を実現する CSS

クリック後にポップアップボックスを実現し、上下左右に中央揃えし、灰色の透明マスクを追加してウィンドウ...

MySQLの数値型自動増分における落とし穴

テーブル構造を設計する場合、数値型は最も一般的な型の 1 つですが、数値型をうまく使用するのは想像す...

VPS はオフライン ダウンロード サーバーを構築します (ネットワーク ディスクの時代以降)

モチベーション学習の必要性から、海外のサーバーメーカー(どこのメーカーかは言いません)のVPSサービ...

MySQL 5.7.17 winx64 のインストールと設定方法のグラフィックチュートリアル

Windows インストール mysql-5.7.17-winx64.zip メソッド レコード &...

MySQLチュートリアルではストアドプロシージャを徹底的に理解します

目次1. ストアドプロシージャに関連する概念2. ストアドプロシージャの使用1) ストアドプロシージ...

MySQL のデータ削除とデータ テーブル メソッドの例

MySQL でデータやテーブルを削除するのは非常に簡単ですが、削除するとすべてのデータが消えてしまう...

MySQLの空の値とnull値の違いを知っていますか?

序文最近、友人がSQLを書くときにnull値を判定する方法が間違っていて、プログラム内のデータにエラ...

CSS における重要なカスケード概念の詳細な説明

最近、プロジェクトの過程で問題に遭遇しました。メニューバーを常に上部に表示し、後続の要素をその下に表...

MySQL データ挿入最適化メソッドconcurrent_insert

スレッドがテーブルに対して DELAYED ステートメントを実行するときに、そのようなハンドラーが存...

iframe 適応サイズ実装コード

ページドメインの関係:メインページ a.html はドメイン A: www.jb51.net に属し...

MySQLクエリ条件におけるonとwhereの配置の違いの分析

導入今日SQLを書いているときに、問題が発生しました。要件は、データを照会し、スコアと過去 1 週間...

要素のel-tree複数選択ツリー(チェックボックス)親子ノードの関連付けが関連付けられていません

属性チェック-厳密公式ドキュメントでは、チェックボックスが表示されるときに親項目と子項目を互いに関連...

vue-cli で stimulsoft.reports.js を使用する詳細なチュートリアル

vue-cli は stimulsoft.reports.js を使用します (ナニーレベルのチュー...

Nginx シグナル制御

Nginx の紹介Nginx は、高性能な HTTP およびリバース プロキシ サーバーであり、IM...

redhat7 に yum 経由で mysql5.7.17 をインストールするチュートリアル

RHEL/CentOS シリーズの Linux オペレーティング システムには MySQL ソース自...