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

推薦する

Linux で指定された期間に数分ごとにタスク スケジュール crontab を自動的に実行する方法

まずコードを見てみましょう #/bin/sh datename=$(日付 +%Y%m%d-%H%M%...

Dockerを使用してPythonランタイム環境の基本イメージを作成する方法

1. 準備1.1 Pythonインストールパッケージをダウンロードします(注:Pythonバージョン...

CentOS7 systemdにカスタムシステムサービスを追加する方法

システムド: CentOS 7のサービスsystemctlスクリプトは、/usr/lib/syste...

Web プロジェクト開発 JS 機能の手ぶれ補正とスロットリングのサンプル コード

目次安定導入手ぶれ補正シーン1(マウスの動き込み)手ぶれ補正シーン2(キーボードのキー)関数のスロッ...

期間限定フラッシュセール機能を実装するJavaScript

この記事では、期間限定フラッシュセール機能を実装するためのJavaScriptの具体的なコードを参考...

VueはSplitを使用して、ユニバーサルドラッグアンドスライドパーティションパネルコンポーネントをカプセル化します。

目次序文始める基本レイアウトデータバインディングイベントバインディング最適化ジッター問題を最適化する...

ツールベースのウェブサイトの考察: ツールベースのウェブサイトの定義と典型的なケース分析 (写真とテキスト)

ツール型ウェブサイトについて、まず疑問に思うのは、無数のオンラインウェブサイトの中で、どのようなウェ...

Redux Toolkit で Redux を簡素化する方法

目次Redux Toolkitが解決する問題何が含まれていますか? Redux Toolkit AP...

MySQL で自動インクリメントシーケンスを実装するためのサンプルコード

1. シーケンステーブルを作成する テーブル `sequence` を作成します ( `name` ...

IDEA が docker を統合して springboot プロジェクトを展開するプロセス全体

目次1. IDEAはdockerプラグインをダウンロードします2. クラウドサーバーDocker 2...

Linux ディスク パーティションの実装の原理と方法の分析

覚えて: IDE ディスク: 最初のディスクは hda、2 番目のディスクは hdb...最初のディ...

プロジェクトのフロントエンドとバックエンドでの Echart チャートの使用に関する詳細な説明

目次序文1. プロジェクトアーキテクチャ2. Echart公式サイトにアクセスして自己分析を学ぶ2....

この記事ではSQL CASE WHENの使い方を詳しく説明します

目次シンプルな CASEWHEN 関数:これは、CASEWHEN 条件式関数を使用するのと同じです。...

ボタンと入力タイプの違いと注意点

<button> タグ<br />定義と使用法<button> ...

CSSの使用に関する深い理解 clear:both

clear:both清除浮動これは私が常に持っていた印象ですが、私はこれをめったに使用せず、私の理...