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

推薦する

shtmlとhtmlの違い

Shtml と asp は似ています。shtml という名前のファイルでは、asp の命令と同様に、...

HTML の blockquote タグの使用と美化

ブロック引用の定義と使用法<blockquote> タグは引用ブロックを定義します。 &...

Linux seqコマンドの使い方

1. コマンドの紹介seq (シーケンス) コマンドは、指定されたステップ サイズに従って、開始番号...

Vue の v-model ディレクティブと .sync 修飾子の違いの詳細な説明

目次vモデル.sync微妙な違い機能シナリオを要約します。 vモデル <!--親コンポーネント...

MySQLのジョイントインデックス機能の分析と使用例

この記事では、例を使用して、MySQL 共同インデックスの機能と使用方法を説明します。ご参考までに、...

Linux 面接で最もよく聞かれる 10 の質問のまとめ

序文Linux システムの運用および保守エンジニア職の面接を受ける場合は、次の 10 個の最も一般的...

div が iframe に覆われるいくつかの状況とその解決策

類似の構造:コードをコピーコードは次のとおりです。 <div></div>&...

要素複数フォーム検証の実装

プロジェクトでは、フォーム テストが頻繁に発生します。単一のフォーム テストについては、詳細な紹介が...

MySQL FAQ シリーズ: ibdata1 ファイルのサイズが突然増加しないようにする方法

0. はじめにibdata1 ファイルとは何ですか? ibdata1 は、innodb システム テ...

ノードの対応するバージョンに関する簡単な説明 node-sass sass-loader

目次ノードのバージョンが一致しない、ノードをアップグレードまたはダウングレードするnvm を使用して...

Vue3は独自のページングコンポーネントをカプセル化します

この記事の例では、vue3 が独自のページングコンポーネントをカプセル化する具体的なコードを参考まで...

MySQL方言の簡単な紹介

データベースはさておき、人生における方言とは何でしょうか?方言とは、ある場所特有の言語です。他の場所...

JavaScript ES6 モジュールの詳細な説明

目次0. モジュールとは何か1.モジュールの読み込み1.1 方法1 1.2 方法2 2. 輸出と輸入...

純粋な CSS で中空効果を実現するためのサンプルコード

私は最近、空洞化効果について研究しました。背景クリップ: テキスト背景はテキストの前景色にクリップさ...

MySQL UNION演算子の基本知識ポイント

MySQL UNION 演算子このチュートリアルでは、MySQL UNION 演算子の構文と例を紹介...