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でイメージを削除する方法

推薦する

Windows システムに VirtualBox と Ubuntu 16.04 をインストールするための詳細なチュートリアル

1. ソフトウェアの紹介バーチャルボックスVirtualBox は、無料のオープンソース仮想マシン ...

Linux で毎日データベースの自動バックアップを設定する方法

この記事では、Centos7.6 システムと Oracle11g を例に挙げます。 1. まずデータ...

Linux で MySQL をインストールする簡単な方法

Linux に MySQL をインストールする方法をオンラインで検索すると、多くの方法が表示されまし...

MySQL データ ウェアハウスを保護するための 5 つのヒント

さまざまなソースからデータを集約することで、中央倉庫を作成できます。データ ウェアハウスは、ビジネス...

Docker はキューとタスクのスケジューリングを実現するために Laravel アプリケーションをデプロイします

前回の記事では、Docker を使用して Laravel アプリケーションをデプロイする方法について...

WHMCS V7.4.2 グラフィカル インストール チュートリアル

1. はじめにWHMCS は、ユーザー管理、請求書の支払い、ヘルプ サービスなど、オンライン ビジネ...

xshell を使用して VMware で Linux に接続する方法 (2 つの方法)

【序文】最近、ITOO の試験システムのストレステストを行いたいので、自分のコンピュータに Lin...

Vue2.x プロジェクトのパフォーマンス最適化のためのコード最適化の実装

目次1 v-ifとv-showの使用2. 計算と監視を区別する3 v-for トラバーサルでは、アイ...

MySQL 5.7.13 ソースコードのコンパイル、インストール、および構成方法のグラフィックチュートリアル

インストール環境: CentOS7 64ビットMINI版公式ソースコードのコンパイルおよびインストー...

MySQL サブクエリとグループ化されたクエリ

目次概要サブクエリサブクエリの分類クエリの結果によるとサブクエリの位置で区別する選択後のサブクエリサ...

easycomモードでUNI-APPコンポーネントを呼び出す際に習得する必要がある実践的なスキル

この記事は議論の出発点となることを目的としています。詳細なドキュメントと easycom の仕様につ...

WeChatミニプログラム開発のためのコンポーネント設計仕様

WeChat ミニプログラム コンポーネント設計仕様コンポーネントベースの開発という考え方は、私の開...

MySQLカスタム関数の簡単な使用例

この記事では、例を使用して MySQL カスタム関数の使用方法を説明します。ご参考までに、詳細は以下...

JavaScript ベースのランダム点呼システムの実装

この記事では、ランダムロールコーラーを実装するためのJavaScriptの具体的なコードを参考までに...

QTとJavaScript間のインタラクティブデータの実装

1. QTからJSへのデータフロー1. QTはJS関数を呼び出し、JSはパラメータを通じてQTの値を...